javascript用鼠标拖动图片移动

本文介绍了一种使用 JavaScript 实现网页中图片拖动的方法。通过监听鼠标事件,可以实现图片在网页上自由移动的功能。文章包含完整的 JavaScript 代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script language="JavaScript">
var allow=false;//判断是否允许被拖动
var img;//被拖动的图片的对象
var x;//鼠标相对于浏览器的x坐标
var y;//鼠标相对于浏览器y坐标
function move()
{
if (event.button==1 && allow) //改变被拖动元素在页面上的位置
{
img.style.pixelLeft=temp1+event.clientX-x;
img.style.pixelTop=temp2+event.clientY-y;
}
}
function begin()
{
if (!document.all)//说明一个元素也没有则结束
return
if (event.srcElement.id=="drag") //捕捉鼠标和被拖动元素的当前位置,通过id来获得某个唯一元素
{
allow=true;
img=event.srcElement;
temp1=img.style.pixelLeft;//记录该图片的x坐标
temp2=img.style.pixelTop;
x=event.clientX;//记录鼠标当前的x坐标
y=event.clientY;
document.onmousemove=move;
}
}
document.onmousedown=begin; //鼠标左键按下时,准备拖动
document.onmouseup=function(){allow=false}//鼠标左键放开时,拖动停止
</script>
<span style="font-family:DextorOutD;font-size: 9pt"><img src="**********.jpg" id="drag" onmouseover="this.style.cursor='hand';this.style.position='relative'"></span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值