Rumah > Artikel > hujung hadapan web > Kelas seret halaman web tersuai yang dilaksanakan oleh kemahiran JS_javascript

Kelas seret halaman web tersuai yang dilaksanakan oleh kemahiran JS_javascript

WBOYasal: 2016-05-16 15:33:34961semak imbas

Contoh dalam artikel ini menerangkan kelas seret halaman web tersuai yang dilaksanakan dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Pertama lihat tangkapan skrin kesan berjalan:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-zdy-web-drug-pic-style-codes/

Kod khusus adalah seperti berikut:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自写的拖动类……</title>
<script type="text/javascript">
var d=document;//给document对象一个通用的事件侦听方法
d.addListener=function(e,f,b){
 this.attachEvent&#63;this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
}
d.removeListener=function(e,f,b){
 this.detachEvent&#63;this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
}
function $(){//接收一个id参数，返回带有startDrag方法的对象
 var o=document.getElementById(arguments[0]);
 o.addListener=function(e,f,b){
  this.attachEvent&#63;this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
 }
 o.removeListener=function(e,f,b){
  this.detachEvent&#63;this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
 }
 o.startDrag=function(obj){//参数obj默认为o本身，可以传其它参数以确定要移动的对象
  var obj=obj&#63;obj:o;
  var sx,sy;
  o.style.cursor="move";
  o.addListener("mousedown",function(e){
   e||event;
   if(e.button==1||e.button==0){
    sx=e.clientX-obj.offsetLeft;sy=e.clientY-obj.offsetTop;
    d.addListener("mousemove",move,false);
    d.addListener("mouseup",stopDrag,false);
   }
  },false);
  var stopDrag=function(){
   d.removeListener("mousemove",move,false);
   d.removeListener("mouseup",stopDrag,false);
  }
  var move=function(e){
   e||event;
   window.getSelection &#63; window.getSelection().removeAllRanges() :
    document.selection.empty();
   if(e.preventDefault)e.preventDefault();//这两句便是解决firefox拖动问题的.
   with (obj.style){
    position="absolute"
    left=e.clientX-sx+"px";
    top=e.clientY-sy+"px";
   }
  }
 }
 return o; 
}
window.onload=function(){$("ok").startDrag($("os"))}//本例中拖动ok元素，移动其父元素
</script>
<style type="text/css">
*{margin:0;padding:0}
#ok{width:215px;height:170px;background:url(images/sample1.gif)}
#os{width:400px;height:300px;background:#09f;left:300px}
#os2{width:400px;height:300px;background:#f90;}
</style>
</head>
<body>
<div id="os"><p id="ok"></p></div>
<div id="os2"></div>
</body>
</html>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

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

Artikel sebelumnya：jQuery melaksanakan kesan menutup menu bar alat tetap di bahagian bawah (atas)Artikel seterusnya：jQuery melaksanakan kesan menutup menu bar alat tetap di bahagian bawah (atas)

Artikel berkaitan

Lihat lagi