一款代码精简的JS鼠标拖动DIV层效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>一款代码精简的JS鼠标拖动DIV层效果丨芯晴网页特效丨CsrCode.Cn</TITLE>
<script type="text/javascript">
function drag(o){
o=document.getElementById(o);
o.style.position="absolute";
o.onmousedown=function(e){
e=e||window.event;
var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
document.onmousemove=function(e){
e=e||window.event;
o.style.left=(e.clientX-x)+"px";
o.style.top=(e.clientY-y)+"px";};
document.onmouseup=function(){document.onmousemove=null;o.onmousedown=null;};};}
</script>
</HEAD>
<BODY>
<div id="cen">
<p class="control" style="margin-bottom:10px;" title="开始拖动" onmousedown="drag('cen')"><b>按此处开始拖动</b></p>
<p>这里可以是一段文字</p>
<p>其实也可以是一个层！</p>
<p><a href="/"><img src="/images/m01.jpg" border=0></a></p>
</BODY>
</HTML>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<HTML>
<HEAD>
<TITLE>一款代码精简的JS鼠标拖动DIV层效果丨芯晴网页特效丨CsrCode.Cn</TITLE>
<script type="text/javascript">
function drag(o){
o=document.getElementById(o);
o.style.position="absolute";
o.onmousedown=function(e){
e=e||window.event;
var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
document.onmousemove=function(e){
e=e||window.event;
o.style.left=(e.clientX-x)+"px";
o.style.top=(e.clientY-y)+"px";};
document.onmouseup=function(){document.onmousemove=null;o.onmousedown=null;};};}
</script>
</HEAD>
<BODY>
<div id="cen">
<p class="control" style="margin-bottom:10px;" title="开始拖动" onmousedown="drag('cen')"><b>按此处开始拖动</b></p>
<p>这里可以是一段文字</p>
<p>其实也可以是一个层！</p>
<p><a href="/"><img src="/images/m01.jpg" border=0></a></p>
</BODY>
</HTML>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
