这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现拖拽效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
效果图:(红色方块可任意拖动)
代码如下:
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>Document</title>
- <style type="text/CSS">
- *{
- margin:0;
- padding:0;
- }
- body{
- background:url("img/2345_image_file_copy_1.jpg");
- }
- #d1{
- width:100px;
- height:100px;
- background:red;
- margin-left:300px;
- }
- </style>
- </head>
- <body>
- <div id="d1"></div>
- </body>
- <script>
- window.onload=function(){
- var d1=document.getElementById("d1");
- d1.onmousedown=function(e){
- var mouseX=e.clientX;
- var mouseY=e.clientY;//计算xy
- var pianyiX=mouseX-d1.offsetLeft;
- var pianyiY=mouseY-d1.offsetTop;
- document.onmousemove=function(e){
- var newX=e.clientX-pianyiX;
- var newY=e.clientY-pianyiY;
- d1.style.marginLeft=newX+"px";
- d1.style.marginTop=newY+"px";
- }
- };
- document.onmouseup = function(e){
- document.onmousemove = null ;
- };
- }
- /*
- 结果,上面的onmousemove要写在document上,我写在div上导致错误
- */
- </script>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/327178.html