JS实现简洁、全兼容的拖动层实例
作者：shichen2014 发布时间：2024-04-19 09:49:08
标签：JS,拖动层
本文实例讲述了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程序设计有所帮助。
0
投稿猜你喜欢
- 这里列出了javascript 中的document.execCommand() 的各种参数说明：2D-Position 允许通过
- 很类似java的properties文件xml文件db_config.ini[baseconf]host=127.0.0.1port=330
本文介绍了详解TensorFlow在windows上安装与简单示例，分享给大家，具体如下：安装说明平台：目前可在Ubuntu、Mac OS、- 大型的连锁店有一个大问题。每天，在每家商店会发生数千次交易。公司执行官希望对这些数据进行挖掘。哪些产品卖得好？哪些不好？有机产品在哪里卖得好
- 本文实例讲述了python清除指定目录内所有文件中script的方法。分享给大家供大家参考。具体如下：将脚本存储为stripscripts.
- 这篇文章主要介绍了一种简单的MySQL数据库安装方法，详细内容请大家参考下文：虽然安装MySQL数据库的文章很多,但是我看后感觉对于初学者来
- 1. 概述动态规划算法应用非常之广泛。对于算法学习者而言，不跨过动态规划这道门，不算真正了解算法。初接触动态规划者，理解其思想精髓会存在一定
- 目录准备xlrd 读取 Excelxlwt 写入 Excel进阶用法最后准备使用 Python 操作 Excel 文件，常见的方式如下：xl
- 本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法。分享给大家供大家参考，具体如下：这里主要介绍一下微信小程序的图片上传图片删除和图
- 4 月 27 日，GitHub 趋势榜第 3 位是一个用 Python 编码实现的算法库，Star 数早已达到 26000+链接：https
- 如下所示：def test1(): try: print('to do stuff')
- 本文实例为大家分享了python实现文字版扫雷的具体代码，供大家参考，具体内容如下python版本:2.7游戏运行图:代码已经注释得很清楚，
- sql server 全文检索有两种搜索方式，一种是contains，另一种是freetext。前者是包含，类似于 like '％关
- 概述当我们使用组件库的时候，某些组件并不是直接放到模板当中进行使用，而是通过api的方式调用生成组件并且挂在到我们的页面中，其中最常见的就是
- 本文实例讲述了thinkPHP中配置的读取与C方法。分享给大家供大家参考，具体如下：1.项目公共配置Conf/config.php内容如下&
- 继续练手，根据之前获取汽油价格的方式获取了金价，暂时没钱投资，看看而已#!/usr/bin/env python# -*- coding:
- 在一些问答平台，经常会遇到一类关于Python的问题：“学习Python，应该选择哪款开发工具？”如果，对于有一定经验的开发者而言，肯定会对
- 在网站中经常会生成表格，CSV和Excel都是常用的报表格式，CSV相对来说比较简单，如果大家有疑问我会相继发布一些CSV的实例，这里主要介
- 简单的仿图片验证码，适合新手简单的仿图片验证码演示，很容易被破解，实用性不大，但拿出来给新手学习一下还是不错的：JScript.Asp代码示
- python中的Reportlab模块reportlab模块是用python语言生成pdf文件的模块安装：pip install repor
