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

        最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定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 = $("#p_w_picpaths1").attr("height");			            if (!height1) {                height1 = height1.substring(0, height1.length - 2);				            }            var width1 = $("#p_w_picpaths1").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;            }                        $("#p_w_picpaths1").attr("height", temp1 + "px");			            $("#p_w_picpaths1").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() {    $("#p_w_picpaths1").attr("height", "40px");    $("#p_w_picpaths1").attr("width", "140px;");    $("#p_w_picpaths1").css("zoom", "100%");    $("#block1").css("left", "0px");    $("#block1").css("top", "0px");}

第五步:

        需要引入

第六步:

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

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

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

总结:

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

×××位置:

有问题,欢迎举手!3Q!