recherche

Maison >interface Web >js tutoriel >Classe de glissement de page Web personnalisée implémentée par les compétences JS_javascript

Classe de glissement de page Web personnalisée implémentée par les compétences JS_javascript

WBOY
WBOYoriginal
2016-05-16 15:33:341029parcourir

L'exemple de cet article décrit la classe de déplacement de page Web personnalisée implémentée dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Regardez d'abord les captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente l'effet de fermeture du menu de la barre d'outils fixé en bas (en haut)Article suivant：jQuery implémente l'effet de fermeture du menu de la barre d'outils fixé en bas (en haut)

Articles Liés

Voir plus