js自作画像ルーペ機能

4101 ワード

js。拡大鏡

本論文の実例は、皆さんにAndroid九宮格写真展示の具体的なコードを共有しました。
コメント:
small cceze:600 x 400
ビックサイズ：1200 x 800
原理:
1、大図は小図の2倍整です。
2、大きい図は小さい画像の中心点を中心にしています。
      a.transform：tranlate(-50%-50%)
     b.(rate-05)*50%
      c.clip：rect（t，r，b，l）は小図境界を境界とする。
3、rectはabsoluteが必要です。
4、マウスの画像内の位置を取得する
     a.マウスの位置XYを取得する
    b.画像位置、幅、高さを取得する
             i.マウスの画像内のパーセンテージの位置を取得します。
             ii.パーセンテージ位置を大図left、topに適用する
問題:
中央の理解が低すぎる:
          absolute，left，top，right，bottom，magin
拡大縮小問題:
           最初：transform:scale()スケーリング
           トランスミッションを利用した移行
                 その結果、この方法を採用するとマウスが移動する時にガットンします。
                       可能性の理由：毎回hoverはtransionイベントをトリガします。
           解決方法：アニメイトアニメを採用してスケーリングを実現しました。
詳細:
o mouseイベントeでe.pageXとe.pageYを動的に取得します。
で画像の位置を取得します。
（）.width（）/height（）で画像の幅の高さを取得します。
      間違った操作でもクラスの取得方法を忘れました。
           $().atr（「クラス」）
           $().prop（「クラス」）
                    event.tragt.className
ホーバーを実現するには透明な塊が現れます。外部でopacity:0.5です。z-inndexをセットすればいいです。


<html>
 <head>
  <meta charset="UTF-8">
  <title>WEBGOD</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   #warpper{
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    width: 600px;
    height: 400px;
   }
   .small{
    text-align: center;
   }
   .big{
    display: none;
    clip: rect(200px,900px,600px,300px);
    position: absolute;
    width: 1200px;
    height: 800px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
   }
   .big img{
    position: absolute;
    width: 600px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
   }
  </style>
 </head>
 <body>
   
  <div id="warpper">
   <div class="small">
    <img src="img/small_19.jpg"/>
   </div>
   <div class="big">
    <img src="img/img_19.jpg"/>
   </div>
  </div>
  <script type="text/javascript">
   $(function(){
    var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
    $("#warpper").hover(function(){
     $(".big").css("display","block");
     $(".big img").animate({"width":"1200px"},500);
    },function(){
     $(".big img").animate({"width":"600px"},1);
     $(".big").css("display","none");
    })
    $("#warpper").on("mousemove",function(e){
     x = e.pageX;
     y = e.pageY;
     top = $(".small img").offset().top;
     left = $(".small img").offset().left;
     width = $(".small img").width();
     height = $(".small img").height();
     //
     imgWidth = $(".big img").width();
     imgHeight = $(".big img").height();
     rateX = (left+width-x)/width;
     rateY = (top+height-y)/height;
     if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){
      $(".big img").css("left",(rateX-0.5)*50+"%");
      $(".big img").css("top",(rateY-0.5)*50+"%");
     }
    })
   })
  </script>
 </body>
</html>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

大バックアップmysqlファイルの復元に失敗した解決方法を共有します。

MYSQL挿入処理を繰り返すキーの数種類の方法