一个比较好的js拖动层代码,发上来共享一下。
<!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=gb2312" />
<title>JS拖动层</title>
</head>
<body>
<div id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
<div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; 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>
分享到:
相关推荐
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 ...
js弹出层可拖动兼容各大浏览器.pdf
拖拽兼容浏览器的js文件 鼠标移出拖拽容器,当拖拽时,可设置拖拽的容器是否透明及透明度多少
js弹出层可拖动兼容各大浏览器(20211002200327).pdf
js弹出层可拖动兼容各大浏览器[文].pdf
js弹窗想必大家都有见到过吧,如何要说可以自由拖拽,并兼容大部分浏览器的就没有几个了吧,本文的这个示例或许是大家要找的,可以参考下
js放大缩小拖拽图片(兼容IE、火狐)的js脚本实例
JS javascript 拖动层类 兼容所有浏览器
项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。
简单时尚的js弹窗可以自由拖拽同时兼容主流浏览器.zip
1、JQuery图片拖动排序兼容各种浏览器 2、采用流体布局自动排版
系统默认的滚动条很丑,用这个可以自己换成图片等。 主要事件: 上、下按钮按住,内容...拖动滚动条,内容快速滚动。 点击滚动条空闲位置,内容定位。 鼠标滚轮在内容中滚动时,内容滚动。 代码未整理,可能比较乱。
学习时写的拖动层,功能比较简单,主要是实现了不用JS框架而实现拖动效果。 兼容主要浏览器
本文实例讲述了JS实现兼容各种浏览器的高级拖动方法。分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head>...
拖动实现翻页的代码,很多人都想拥有这样一个功能,过渡效果很酷很漂亮 现在于JavaScript配合CSS终于实现了,个人感觉真的很不错,按住鼠标左键向某一方向拖动即可完成分页动作,符合WEB标准,兼容多浏览器 ...
javascript实现层固定在浏览器右下角,拖动滚动条不影响其位置. 另外加入Jquery1.7.1js库,用于在固定层上再弹出层的效果. 该代码兼容火狐,谷歌,IE6,7,8浏览器. 说不清楚,总之,此资源用于个人的转储用途,到公司下载用...