电脑疯子技术论坛|电脑极客社区

微信扫一扫 分享朋友圈

已有 892 人浏览分享

一段javascript 图层操作

 关闭 [复制链接]
892 0


  1. //移动的图层,拖动
  2. 1.<span style='position:absolute;width:200;height:200;background:red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>meizz</span>
  3. <script language=javascript>
  4. var Obj;
  5. function MouseDown(obj)
  6. {
  7.    Obj=obj;
  8.    Obj.setCapture();
  9.    Obj.l=event.x-Obj.style.pixelLeft;
  10.    Obj.t=event.y-Obj.style.pixelTop;
  11. }
  12. function MouseMove()
  13. {
  14.   if(Obj!=null)
  15.    {
  16.      Obj.style.left = event.x-Obj.l;
  17.      Obj.style.top = event.y-Obj.t;
  18.    }
  19. }
  20. function MouseUp()
  21. {
  22.   if(Obj!=null)
  23.    {
  24.      Obj.releaseCapture();
  25.      Obj=null;
  26.    }
  27. }
  28. </script>
  29. 2.
  30. <div id="myDiv" src="logo.gif" ondrag="doDrag();" onmouseover="this.style.cursor='hand'" style="position:absolute;left=100;top=100;" onmousedown="doMouseDown();">
  31. <a href="#" onclick="return false"><h1>wlecome</h1></a>
  32. </div>
  33. <script language="JavaScript" type="text/javascript">
  34. var orgMouseX;
  35. var orgMouseY;
  36. var orgObjX;
  37. var orgObjY;
  38. function doDrag()
  39. {
  40. var myObject=document.all.myDiv;

  41. var x=event.clientX;
  42. var y=event.clientY;
  43. myObject.style.left=x-(orgMouseX-orgObjX);
  44. myObject.style.top=y-(orgMouseY-orgObjY);

  45. }
  46. function doMouseDown()
  47. {
  48. orgMouseX=event.clientX;
  49. orgMouseY=event.clientY;
  50. orgObjX=parseInt(document.all.myDiv.style.left);
  51. orgObjY=parseInt(document.all.myDiv.style.top);
  52. }

  53. </script>
复制代码


您需要登录后才可以回帖 登录 | 注册

本版积分规则

1

关注

23

粉丝

2901

主题
精彩推荐
热门资讯
网友晒图
图文推荐

Powered by Pcgho! X3.4

© 2008-2022 Pcgho Inc.