网页中如何实现鼠标拖动图片？
网页中显示一张大图片，需要鼠标能拖动图片上下左右移动，左右方向要实现无缝移动。另外，最好是周边不要出现上下左右拖动条。请高手帮忙，无限感谢。...
网页中显示一张大图片，需要鼠标能拖动图片上下左右移动，左右方向要实现无缝移动。 另外，最好是周边不要出现上下左右拖动条。 请高手帮忙，无限感谢。
展开
展开全部
把下边代码存为html。把图片换成你的路径即可。 <!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"> <head> <title>JS拖拽DIV</title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background-color: #C8FFFF; } </style> <script type="text/javascript"> function drag(obj) { if (typeof obj == "string") { var obj = document.getElementById(obj); obj.orig_index = obj.style.zIndex; //设置当前对象永远显示在最上层 } obj.onmousedown = function (a) {//鼠标按下 this.style.cursor = "move"; //设置鼠标样式 this.style.zIndex = 1000; var d = document; if (!a) a = window.event; //按下时创建一个事件 var x = a.clientX - document.body.scrollLeft - obj.offsetLeft; //x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距 var y = a.clientY - document.body.scrollTop - obj.offsetTop; //y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距 d.onmousemove = function (a) {//鼠标移动 if (!a) a = window.event; //移动时创建一个事件 obj.style.left = a.clientX + document.body.scrollLeft - x; obj.style.top = a.clientY + document.body.scrollTop - y; } d.onmouseup = function () {//鼠标放开 document.onmousemove = null; document.onmouseup = null; obj.style.cursor = "normal"; //设置放开的样式 obj.style.zIndex = obj.orig_index; } } } </script> </head> <body> <div id="div2" style="left: 170px; background-color: #408080"> <img src="../../Content/images/1271829839604702.jpg" /> </div> <script type="text/javascript"> drag("div2"); </script> </body> </html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
