javascript实现对图片的随意拖拽,放大缩小 | 您所在的位置:网站首页 › 前端图片缩放拖拽 › javascript实现对图片的随意拖拽,放大缩小 |
【JS】基于javascript实现对图片的随意拖拽,放大缩小
最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢复原图!对于我们这样后台程序员而言,这种前台效果实现起来确实有点勉强,在经过半个小时挣扎之后,终于完成效果,发表上来,以供广大后台程序员借鉴吧!
第一步: body之内的代码如下: 1 2 3 4 5 6 7 8 9
第二步: 鼠标自由拖拽图片自由移动代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 /*鼠标将图片在相应的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事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 $(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 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 ; }
第四步: 双击图片恢复到原图 1 2 3 4 5 6 7 8 function realsize() { $( "#images1" ).attr( "height" , "40px" ); $( "#images1" ).attr( "width" , "140px;" ); $( "#images1" ).css( "zoom" , "100%" ); $( "#block1" ).css( "left" , "0px" ); $( "#block1" ).css( "top" , "0px" ); }第五步: 需要引入 1
第六步:
实例图片长为140px;宽为40px;各位同学自己引入的图片记得修改height,width。 另外,我这些数据都是写死的,因为是案例,而实际项目中这些数据可能都是你从后台传过来的 需要我们用$来取,包括我们的图片路径也是,这样才能保证我们点击每张图片的效果都是不一样的。
总结: 广大后台程序员也需要大大掌握前台交互技术,从今天开始努力学习!
源码下载位置:【javascript】基于javascript实现对图片的随意拖拽,放大缩小 |
CopyRight 2018-2019 实验室设备网 版权所有 |