Rumah > hujung hadapan web > tutorial js > javascript 鼠标拖动图标技术_javascript技巧

javascript 鼠标拖动图标技术_javascript技巧

WBOY
Lepaskan: 2016-05-16 18:35:00
asal
1032 orang telah melayarinya

这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码

复制代码 代码如下:



<script> <BR>var bb = document.getElementById("block"); <BR>bb.onmousedown = function(){ <BR>//获取鼠标当前坐标 <BR>var pageX = event.clientX; <BR>var pageY = event.clientY; <BR>//获取block的坐标,左边界和上边界 <BR>var offX = parseInt(this.style.left)||0; <BR>var offY = parseInt(this.style.top)||0; <BR>//计算出鼠标坐标相对于block坐标的间距 <BR>var offLX = pageX-offX; <BR>var offLY = pageY-offY; <BR>if(!document.onmousemove){ <BR>document.onmousemove = function(){ <BR>bb.style.left=event.clientX-offLX; //设置block的X坐标 <BR>bb.style.top=event.clientY-offLY; //设置block的Y坐标 <BR>} <BR>} <BR>} <BR>document.onmouseup = function(){document.onmousemove = null;} //鼠标弹起 <BR></script>

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan