jQuery拖动、滚轮查看大图-类似地图操作-白红宇

jQuery拖动、滚轮查看大图-类似地图操作

阅读量：6899 次

发布时间：2019-06-27

本文共 1367 字，大约阅读时间需要 4 分钟。

源码提要：

。pageX,pageY 鼠标指针的位置,相对于文档的左边缘；

。parseInt(css("left"))的left值；

。mousedown、mouseup、mousemove 鼠标事件；

。DOMMouseScroll、onmousewheel 鼠标滚动事件；

源码：


            
                 
                      
       
                
       
                
       
                
       
            
      
            
                      
       
                
       
            
      
        
     
        
         
    
$(function() {    //鼠标拖动    var _move = false,_x, _y,        $img = $("#pic"),w=$(".pic-area").width(),h=$(".pic-area").height();     $img.mousedown(function(e) {         _move = true;         _x = e.pageX - parseInt($(this).css("left"));//图片距左上角距离         _y = e.pageY - parseInt($(this).css("top"));         return false;     });    $img.mousemove(function(e) {         if (_move) {                var x = e.pageX - _x;                 var y = e.pageY - _y;                if(x>0) x=0;                if(x
    
     0) y=0;                  if(y
     
      0) x=0;        $img.css({left:x});    });    $("#J-picview-top").click(function(){        var y= parseInt($img.css("top"))-20;        if(y
      
       0){            y=0;        }        $img.css({top:y});    });    //放大缩小    $("#J-picview-zoomIn").click(function(){        $img.width($img.width()*1.5);    });    $("#J-picview-zoomOut").click(function(){        $img.width($img.width()*0.5);    }); });