您的位置：首页 > Web前端 > JavaScript

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

2014-05-25 22:20 489 查看

【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");

}

第五步:
需要引入

<script src="jQuery/jquery-1.6.2.js"></script>

第六步：

实例图片长为140px;宽为40px;各位同学自己引入的图片记得修改height，width。
另外，我这些数据都是写死的，因为是案例，而实际项目中这些数据可能都是你从后台传过来的
需要我们用$来取，包括我们的图片路径也是，这样才能保证我们点击每张图片的效果都是不一样的。

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

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

有问题，欢迎举手！3Q!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片鼠标滚动

相关文章推荐

新的分享

章节导航