这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章介绍了 JavaScript:Div 层拖动效果实例代码,有需要的朋友可以参考一下
Div 层拖动效果图:
实现:CSS:
- <style>
- div
- {
- position:relative;
- }
- </style>
JS:
- <script type="text/javascript">
- var mouseover=true
- var xcoor;
- var ycoor;
- function coordinates()
- {
- if (event.srcElement.id.indexOf("wishbroad") == 0)
- {
- event.srcElement.style.zIndex = 1000;
- mouseover=true;
- pleft=event.srcElement.style.pixelLeft;
- ptop=event.srcElement.style.pixelTop;
- xcoor=event.clientX;
- ycoor=event.clientY;
- document.onmousemove=moveImage;
- }
- }
- function moveImage()
- {
- if (mouseover&&event.button==1)
- {
- event.srcElement.style.pixelLeft=pleft+event.clientX-xcoor;
- event.srcElement.style.pixelTop=ptop+event.clientY-ycoor;
- return false;
- }
- }
- function mouseup()
- {
- event.srcElement.style.zIndex = 1;
- mouseover=false;
- }
- document.onmousedown=coordinates;
- document.onmouseup=mouseup;
- </script>
html:
- <html>
- <head>
- Div层拖动
- </head>
- <body>
- <div id="wishbroad1" style="width:200px; height:100px;border:1px solid black;background:gray;">
- 中国
- </div>
- <div id="wishbroad2" style="width:200px; height:100px;border:1px solid red;background:red;">
- 美国
- </div>
- <div id="wishbroad3" style="width:200px; height:100px;border:1px solid red;background:green;">
- 日本
- </div>
- <div id="wishbroad4" style="width:200px; height:100px;border:1px solid red;background:pink;">
- 巴西
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0418/279520.html