图片滚轮放大缩小，拖拽图片

最新推荐文章于 2018-07-24 09:53:19 发布

_Chris

最新推荐文章于 2018-07-24 09:53:19 发布

阅读量2.1k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/rj532029887/article/details/45060457

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

//直接复制代码，就可以看到效果（别忘记修改图片src）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">

<head >
<title>图片缩放和固定div层拖动</title>
<style type="text/css">
#picDiv
{
margin:8px 8px 4px 0;
border:1px solid #666666;
padding:0;
width:300px;
height:300px;
float:left;
overflow:hidden;
position:relative;
cursor:move;
}

.dragAble
{
position: absolute;
cursor: move;
}
</style>

<script language="javascript" type="text/javascript">

//获取div的四个顶点坐标
function getDivPosition() {
var odiv = document.getElementById('picDiv');
// alert(odiv.getBoundingClientRect().left);
// alert(odiv.getBoundingClientRect().top);

var xLeft, xRigh, yTop, yBottom;
return {
xLeft: odiv.getBoundingClientRect().left,
xRigh: odiv.getBoundingClientRect().left + 310,//#picDiv的宽度+10
yTop: odiv.getBoundingClientRect().top,
yBottom: odiv.getBoundingClientRect().top + 310 //#picDiv的高度+10
};
}

//获取鼠标坐标
function mousePos(e) {
var x, y;
var e = e || window.event;
return {
x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
};

//在固定div层拖动图片
var ie = document.all;
var nn6 = document.getElementById && !document.all;
var isdrag = false;
var y, x;
var oDragObj;

//鼠标移动
function moveMouse(e) {
//鼠标的坐标
mousePos(e).x;
mousePos(e).y;
//div的四个顶点坐标
getDivPosition().xLeft
getDivPosition().xRigh
getDivPosition().yTop
getDivPosition().yBottom

if (isdrag && mousePos(e).x > getDivPosition().xLeft && mousePos(e).x < getDivPosition().xRigh && mousePos(e).y > getDivPosition().yTop && mousePos(e).y < getDivPosition().yBottom) {
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");

function bigimg(i) {
var zoom = parseInt(i.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0)
i.style.zoom = zoom + '%';
return false;
}
</script>

</head>
<body>
<div id="picDiv" >
<img id="pic" class="dragAble" alt="头像" src="~/images/thumbs/1-1.jpg" onmousewheel="return bigimg(this)"/>
<br />
</div>

</body>
</html>

_Chris

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片滚轮放大缩小，拖拽图片

//直接复制代码，就可以看到效果（别忘记修改图片src）图片缩放和固定div层拖动 #picDiv { margin:8px 8px 4px 0; border:1px solid #666666; padding:0; width:300px
复制链接

扫一扫