javascript实现对图片的随意拖拽,放大缩小

【JS】基于javascript实现对图片的随意拖拽,放大缩小

        最近写项目的过程中需要对图片进行一个操作，点击之后弹出图片，在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小，双击图片恢复原图！对于我们这样后台程序员而言，这种前台效果实现起来确实有点勉强，在经过半个小时挣扎之后，终于完成效果，发表上来，以供广大后台程序员借鉴吧！

 第一步：

            body之内的代码如下：

< body >
       < div  id = 'block1'  style = 'height: 0; left: 0px; position: absolute; top: 0px; width: 0;'  class = "dragAble" >
          < img  src = "images/1.png"  id = "images1"
                onmousewheel = "return bbimg(this)"      ondblclick = "realsize();"
                style = "top:0px;left:0px;position:relative;"
                width = "140px"
                height = "40px" >
       div >
body >

第二步：

            鼠标自由拖拽图片自由移动代码如下：

/*鼠标将图片在相应的div自由拖动*/
drag = 0;
move = 0;
var  ie = document.all;
var  nn6 = document.getElementById && !document.all;
var  isdrag =  false ;
var  y,x;
var  oDragObj;
var  pic_width,pic_height,pic_zoom;
var  divleft,divtop;

function  moveMouse(e) {
    if  (isdrag) {
        oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) +  "px" ;
        oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) +  "px" ;
        return  false ;
    }
}

function  initDrag(e) {
    var  oDragHandle = nn6 ? e.target : event.srcElement;
    var  topElement =  "HTML" ;
    while  (oDragHandle.tagName != topElement && oDragHandle.className !=  "dragAble" ) {
        oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
    }
    if  (oDragHandle.className ==  "dragAble" ) {
        isdrag =  true ;
        oDragObj = oDragHandle;
        nTY = parseInt(oDragObj.style.top + 0);
        y = nn6 ? e.clientY : event.clientY;
        nTX = parseInt(oDragObj.style.left + 0);
        x = nn6 ? e.clientX : event.clientX;
        document.onmousemove = moveMouse;
        return  false ;
    }
}
document.onmousedown = initDrag;
document.onmouseup =  new  Function( "isdrag=false" );

第三步：

            鼠标滚动放大缩小代码

            这里需要强调的是火狐浏览器不支持wheel事件，所以需要对其注册wheel事件

$(document).ready( function () {
     if  (window.addEventListener){
        window.addEventListener( 'DOMMouseScroll' , wheel,  false ); //给firefox添加鼠标滚动事件，因为火狐没有wheel事件
    }
    });

function  wheel(event) {
        if  (!event)  /**/ /* For IE. */
        {
            event = window.event;
        }
        else  if  (event.detail)
        {
            var  height1 = $( "#images1" ).attr( "height" );

            if  (!height1) {
                height1 = height1.substring(0, height1.length - 2);

            }
            var  width1 = $( "#images1" ).attr( "width" );

            if  (!width1) {
                width1 = width1.substring(0, width1.length - 2);

            }
            if  (event.detail < 0) {
                var  temp1 = parseInt(height1) * 1.2;
                var  temp2 = parseInt(width1) * 1.2;


            }  else  {
                var  temp1 = parseInt(height1) / 1.2;
                var  temp2 = parseInt(width1) / 1.2;
            }

            $( "#images1" ).attr( "height" , temp1 +  "px" );

            $( "#images1" ).attr( "width" , temp2 +  "px" );
        }
    }
/*非Firefox的主流浏览器*/
function  bbimg(o) {
      var  zoom = parseInt(o.style.zoom, 10) || 100;
      zoom += event.wheelDelta / 12;
      if  (zoom > 0) o.style.zoom = zoom +  '%' ;
      return  false ;
    }

第四步：

        双击图片恢复到原图

function  realsize() {
    $( "#images1" ).attr( "height" ,  "40px" );
    $( "#images1" ).attr( "width" ,  "140px;" );
    $( "#images1" ).css( "zoom" ,  "100%" );
    $( "#block1" ).css( "left" ,  "0px" );
    $( "#block1" ).css( "top" ,  "0px" );

}

第五步:

        需要引入

"jQuery/jquery-1.6.2.js" >

第六步：

实例图片长为140px;宽为40px;各位同学自己引入的图片记得修改height，width。

另外，我这些数据都是写死的，因为是案例，而实际项目中这些数据可能都是你从后台传过来的

需要我们用$来取，包括我们的图片路径也是，这样才能保证我们点击每张图片的效果都是不一样的。

总结：

        广大后台程序员也需要大大掌握前台交互技术，从今天开始努力学习！

源码下载位置：【javascript】基于javascript实现对图片的随意拖拽,放大缩小