Chinaunix首页 | 论坛 | 博客

CrowTLFcrowtlf.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

crowtlf

  • 博客访问： 245422
  • 博文数量： 108
  • 博客积分： 3045
  • 博客等级： 中校
  • 技术积分： 1162
  • 用 户 组： 普通用户
  • 注册时间： 2007-04-19 18:26
文章分类

全部博文（108）

推荐博文
js_事件对象_2

分类： JavaScript

2013-11-27 16:44:02


点击(此处)折叠或打开

  1. <!--拖拽框-->
  2. <style>
  3.     .one1{
  4.         position:absolute;
  5.         background:green;
  6.     }
  7. </style>
  8. <body>
  9. <!--
  10.     <div id="one" style="position:absolute;left:100px;top:100px;width:200px;height:30px;background:red;"></div>
  11.     -->
  12.     <input type="button" onclick="crea()" value="add">
  13.     <script>
  14.         var one=null;
  15.         function crea(){
  16.             if(one!=null)
  17.             return;
  18.             one=document.createElement("div");
  19.             //要写在外面,否则获取不到style
  20.             one.style.top="100";
  21.             one.style.left="100";
  22.             one.style.width="200px";
  23.             one.style.height="30px";

  25.             one.className="one1";

  27.             document.body.appendChild(one);

  29.             one.onmousedown=function(e){
  30.             var ev=e || window.event;
  31.             dx=ev.clientX;
  32.             dy=ev.clientY;
  33.             sx=parseInt(one.style.left);
  34.             sy=parseInt(one.style.top);
  35.             if(!down)
  36.             down=true;
  37.         }
  38.         document.onmouseup=function(){
  39.             down=false;
  40.         }

  42.         }

  44. //    var one=document.getElementById("one");
  45.     var down=false;
  46.     var dx=0;
  47.     var dy=0;
  48.     var sx=0;
  49.     var sy=0;
  50.     document.onmousemove=function(e){
  51.         var ev=e || window.event;
  52.         if(down){

  54.         one.style.top=ev.clientY-(dy-sy);
  55.         one.style.left=ev.clientX-(dx-sx);
  56.     
  57.         }
  58.     }
  59. </script>
  60. </body>


点击(此处)折叠或打开

  1. <!--跟随mouse移动的图片-->

  3. <body>
  4.     <img id="tu" style="position:absolute;left:-400px;top:-200px;" src="logo.png" >
  5. <script>
  6.     var tu=document.getElementById("tu");
  7.     document.onmousemove=function(e){
  8.         var ev=e || window.event;

  10.         var x=ev.clientX;
  11.         var y=ev.clientY;

  13.         tu.style.top=y+20;
  14.         tu.style.left=x+20;

  16.     }
  17. </script>
  18. </body>


点击(此处)折叠或打开

  1. <!--兼容性问题 mouse移动 显示坐标-->

  3. <body>
  4.     <div id="one">
  5.     </div>
  6. <script>
  7.     var one=document.getElementById("one");
  8.     document.onmousemove=function(e){
  9.         var ev=e || window.event;

  11.         var cx=ev.clientX;
  12.         var cy=ev.clientY;
  13.         var sx=ev.screenX;
  14.         var sy=ev.screenY;

  16.         var str="clientX="+cx+",clientY="+cy+",screenX="+sx+",screenY="+sy;

  18.         one.innerText=str;
  19.         window.status=str;
  20.         window.document.title=str;
  21.     }
  22. </script>
  23. </body>


点击(此处)折叠或打开

  1. <!--mouse移动 显示坐标-->

  3. <body onmousemove="test()">
  4.     <div id="one">
  5.     </div>
  6. <script>
  7.     var one=document.getElementById("one");
  8.     function test(){
  9.         var cx=event.clientX;
  10.         var cy=event.clientY;
  11.         var sx=event.screenX;
  12.         var sy=event.screenY;

  14.         var str="clientX="+cx+",clientY="+cy+",screenX="+sx+",screenY="+sy;

  16.         one.innerText=str;
  17.         window.status=str;
  18.         window.document.title=str;
  19.     }
  20. </script>
  21. </body>

阅读(455) | 评论(0) | 转发(0) |
0

上一篇：js_事件对象_1

下一篇：js_window对象

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6