JS实现简洁、全兼容的拖动层实例
更新时间:2015年05月13日 17:25:54 投稿:shichen2014
这篇文章主要介绍了JS实现简洁、全兼容的拖动层的方法,实例分析了javascript鼠标事件及页面元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了JS实现简洁、全兼容的拖动层。分享给大家供大家参考。具体分析如下:
这是一款最简洁的JS层拖动代码,全兼容ie、ff、opera、safari……每一种浏览器都有对应的判断和实现方法,你只需复制代码到你的网页中就可使用。水平高的朋友可以继续修改,添加更多方法,使其功能更强大。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS拖动层</title> </head> <body> <div id="f" style="position: absolute; width: 216px; height: 138px; background-color: skyblue;font-size: 12px; top: 210px; left: 180px; z-index: 101; border: solid 1px blue;"> <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 12px; padding-top: 5px; padding-left: 10px;">层的标题</div> 层的内容 </div> <script type="text/javascript"> var posX; var posY; fdiv = document.getElementById("f"); document.getElementById("title").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ev = window.event;//IE fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = (ev.clientY - posY) + "px"; } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
javascript使用shift+click实现选择和反选checkbox的方法
这篇文章主要介绍了javascript使用shift+click实现选择和反选checkbox的方法,涉及javascript针对键盘按键的判断及checkbox的操作技巧,需要的朋友可以参考下2015-05-05xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之下拉刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05JavaScript鼠标事件监听、触发时机和触发顺序实例讲解
事件监听是Web开发中非常重要的一个概念,掌握了它的用法,可以让我们实现更加丰富和动态的交互效果,这篇文章主要给大家介绍了关于JavaScript鼠标事件监听、触发时机和触发顺序的相关资料,需要的朋友可以参考下2024-01-01addeventlistener监听scroll跟touch(实例讲解)
下面小编就为大家带来一篇addeventlistener监听scroll跟touch(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-08-08Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
这篇文章主要介绍了Bootstrap编写一个在当前网页弹出可关闭的对话框,不用跳转,非弹窗,感兴趣的小伙伴们可以参考一下2016-06-06
最新评论