Die optimierteste JavaScript-Methode zum Erlernen von Mauszieheffekten. Javascript-Fähigkeiten-js-Tutorial-php.cn

Die optimierteste JavaScript-Methode zum Erlernen von Mauszieheffekten. Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:59:45

Original

977 Leute haben es durchsucht

Im Vergleich zu anderen Mauszieheffekten ist dieser Zieheffekt relativ rationalisiert und unterstützt auch die Mausbewegung. Er kann auch relativ bequem definiert werden, indem Sie ihn einfach angeben ID des DIV, das gezogen wird, und die Skalierbarkeit ist sehr gut.

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.