fancyZoom 拖拽移动图片

Posted

fancyZoom是个很炫的图片特效展示插件，点击图片就能直接展示原始尺寸的图片，但当图片像素大于屏幕分辨率的时候，就得移动滚动条看了。这里体验不是很好。

这里我在源码基础上增加了图片拖动。

首先先看 在线示例

关键增加的js代码

function mouseMovePosition(event) {
      if(!window.event) {event.preventDefault();} // 阻止标注浏览器下拖动a,img的默认事件
      var othis = $('#zoom');
      var disY = event.clientY;
      var disX = event.clientX;
      var offset = othis.offset();
      var thisTop = offset.top;
      var thisLeft = offset.left;
      $(document).mousemove(function(event){
          var topY = thisTop + (event.clientY - disY);
          var leftX = thisLeft + (event.clientX - disX);
          $('#zoom').css({top: topY,left: leftX});
          if(window.event) {event.returnValue=false;} // 阻止ie下a,img的默认事件
          return false
      });
      $(document).mouseup(function(){
          $(document).unbind( "mousemove" );
          $(this).unbind( "mousedown" );
      })
      return false
  }

如何使用

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $('div ul li a').fancyZoom({scaleImg: true, closeOnClick: true});
 });
</script>

主要html代码

<body>
    <div id="main_tk">
        <ul class="pic_list">
           <li><a href="#img1"><img src="pic/1.jpg" width="200" height="120"/></a><p>美女一号</p></li>
            <li><a href="#img2"><img src="pic/2.jpg" width="200" height="120"/></a><p>美女二号</p></li>
            <li><a href="#img3"><img src="pic/3.jpg" width="200" height="120"/></a><p>美女三号</p></li>
            <li><a href="#img4"><img src="pic/4.jpg" width="200" height="120"/></a><p>美女四号</p></li>
            <li><a href="#img5"><img src="pic/5.jpg" width="200" height="120"/></a><p>超高图片</p></li>
            <li><a href="#img6"><img src="pic/6.jpg" width="200" height="120"/></a><p>其他图片</p></li>
            <li><a href="#img7"><img src="pic/7.jpg" width="200" height="120"/></a><p>这张也不小</p></li>
        </ul>
        <ul>
            <li id="img1"><img src="pic/1.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img2"><img src="pic/2.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img3"><img src="pic/3.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img4"><img src="pic/4.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img5"><img src="pic/5.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img6"><img src="pic/6.jpg" alt="" /><p>这里可以放些图片简介</p></li>
            <li id="img7"><img src="pic/7.jpg" alt="" /><p>这里可以放些图片简介</p></li>
        </ul>
    </div>
</body>

在线示例：demo

源码下载：Source

本文为原创内容，转载请著名出处 83

原文链接：http://www.madeby83.com/drag-to-move-the-picture.html

 

Comments are closed.