karlew > js/jquery > 鼠标经过或触摸图片放大镜效果

鼠标经过或触摸图片放大镜效果

12-27 7,728 views

平时去一些商城或者图片网站，会有鼠标经过图片局部放大预览的效果，我写了一个样例，支持PC端鼠标经过和手机ipad的触摸动作触发。

演示地址：http://wx.karlew.com/loupe/

QQ截图20160409221223

完整代码如下：

  1. <html>
  2. <head>
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>图片放大镜</title>
  6. <style type="text/css">
  7. body{ padding: 0;margin: 0;width: 100%;height:100%;overflow: hidden; }
  8. .wrap{ text-align: center; }
  9. .wrap img{ width: 60%;cursor: crosshair; }
  10. .loupe{
  11.   position:absolute;
  12.   pointer-events:none;
  13.   visibility:hidden;
  14.   z-index:999;
  15.   width: 200px;
  16.   height: 200px;
  17.   border:3px solid #636363;
  18.   border-radius:50%;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.   <div class="loupe"></div>
  24.   <div class="wrap">
  25.     <img src="img/pic.jpg">
  26.   </div>
  27. </body>
  28. </html>
  29. <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  30. <script type="text/javascript">
  31. $(document).ready(function(){
  32.   var vh=$(window).height()
  33.   var vw=$(window).width()
  34.   var imgh=$(".wrap img").height()
  35.   var imgw=$(".wrap img").width()
  36.   var beginX=vw*2/10
  37.   var endX=beginX+imgw
  38.   var beginY=(vh-imgh)/2
  39.   var endY=beginY+imgh
  40.   $(".wrap").css("margin-top",beginY+"px")
  41.   //鼠标经过
  42.   document.addEventListener("mousemove", loupe , false);
  43.   //触屏模式触发
  44.   document.addEventListener("touchmove", loupe , false);
  45.   document.addEventListener("touchstart", loupe , false);
  46.   document.addEventListener("touchend", function(e) {
  47.     $(".loupe").css("visibility","hidden")
  48.   }, false);
  49.   function loupe(e){
  50.     var x,y
  51.     if(e.type!="mousemove"){
  52.       x=e.touches[0].pageX
  53.       y=e.touches[0].pageY
  54.     }
  55.     //如果支持触摸事件，则屏蔽鼠标经过事件，避免影响touchstart的效果
  56.     else if("ontouchend" in document){
  57.       return false;
  58.     }
  59.     //如果不支持触摸事件，则让鼠标经过事件正常触发
  60.     else{
  61.       x=e.clientX
  62.       y=e.clientY
  63.     }
  64.     //判断鼠标或触摸点在图片区域，是则显示放大镜div层
  65.     if(x>beginX&&x<endX&&y>beginY&&y<endY){
  66.       var mx=100-(x-beginX)/imgw*1920 //1920为原图片宽度
  67.       var my=100-(y-beginY)/imgh*1200 //1200为原图片高度
  68.       var bg="url(img/pic.jpg) "+mx+"px "+my+"px no-repeat #fff"
  69.       $(".loupe").css("left",x-103+"px").css("top",y-103+"px").css('background',bg)
  70.       $(".loupe").css("visibility","visible")
  71.     }else{
  72.       $(".loupe").css("visibility","hidden")
  73.     }
  74.   }
  75. })
  76. </script>

版权属于: karlew

原文地址: https://www.karlew.com/archives/343

转载时必须以链接形式注明原始出处及本声明。

1 条评论

欢迎留言