recherche

Maison  >  Article  >  interface Web  >  La méthode JavaScript la plus simple pour acquérir les compétences effect_javascript en matière de glissement de la souris

La méthode JavaScript la plus simple pour acquérir les compétences effect_javascript en matière de glissement de la souris

WBOY
WBOYoriginal
2016-05-16 15:59:45999parcourir

Comparé à d'autres effets de glissement de la souris, cet effet de glissement est relativement simplifié et il prend également en charge l'adsorption de la souris. Il peut suivre le mouvement de la souris sans appuyer sur le bouton gauche de la souris, il est également relativement pratique à définir, il suffit d'utiliser Spécifiez simplement le bouton gauche de la souris. ID du DIV déplacé et l'évolutivité est très bonne. 

<!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>
<title>鼠标拖动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
 var x,y;
 D(obj).onmousedown=function(e){
 drag_=true;
 with(this){
  style.position="absolute";
  var temp1=offsetLeft;
  var temp2=offsetTop;
  x=oevent(e).clientX;y=oevent(e).clientY;
  document.onmousemove=function(e){
  if(!drag_)return false;
  with(this){
   style.left=temp1+oevent(e).clientX-x+"px";
   style.top=temp2+oevent(e).clientY-y+"px";
  }
  }
 }
 document.onmouseup=new Function("drag_=false");
 }
}
</script>
<body>
<div id="drag" style="background-color:#0066CC;width:280px;
height:160px;padding:20px;border:1px #003399 solid;
font-size:10.5pt;color:white" onmouseover='Move_obj("drag")'>
<p>这个层是可以拖动的，而且还可以吸附鼠标，试试看！</p>
<p>/</p>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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：méthode simple jquery pour obtenir un changement d'image effect_jqueryArticle suivant：méthode simple jquery pour obtenir un changement d'image effect_jquery

Articles Liés

Voir plus