JS实现简洁、全兼容的拖动层实例
作者：shichen2014 时间：2024-04-19 09:49:08
本文实例讲述了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程序设计有所帮助。
标签：JS,拖动层
0
投稿猜你喜欢
手把手教你安装Windows版本的Tensorflow
2021-07-12 07:03:15
关于mysql left join 查询慢时间长的踩坑总结
2024-01-23 14:20:29
Linux下MySQL 5.6.27 安装教程
2024-01-15 02:51:51
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2021-09-21 11:11:33
开源软件包和环境管理系统Anaconda的安装使用
2022-07-15 13:00:13
浅析设计与内容呈现的关系
2009-08-06 18:12:00
Git 教程之标签详解
2023-10-25 21:58:04
OpenCV-Python 摄像头实时检测人脸代码实例
2023-01-10 05:23:33
好习惯和坏习惯
2009-01-20 12:51:00
Python中operator模块的操作符使用示例总结
2023-01-31 12:32:14
在python中将list分段并保存为array类型的方法
2023-11-15 10:18:00
Python使用shutil操作文件、subprocess运行子程序
2021-03-01 00:19:19
Python配置文件解析模块ConfigParser使用实例
2023-10-19 09:10:19
利用django model save方法对未更改的字段依然进行了保存
2021-12-21 21:24:18
Python中ArcPy栅格裁剪栅格(批量对齐栅格图像范围并统一行数与列数)
2021-02-19 21:12:48
详解element-ui 表单校验 Rules 配置 常用黑科技
2023-08-17 17:42:47
利用Python找回微信撤回信息
2022-11-21 22:34:03
Django 如何从request中获取前端数据
2023-06-22 06:52:16
Golang中int, int8, int16, int32, int64和uint区别浅析
2024-04-25 15:05:06
原生JS实现图片轮播 JS实现小广告插件
2024-04-29 13:55:25
