脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现简洁、全兼容的拖动层

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 微信小程序手机号验证码登录的项目实现

    微信小程序手机号验证码登录的项目实现

    本文主要介绍了微信小程序手机号验证码登录的项目实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • JS事件监听与事件委托举例详解(前端小白必学)

    JS事件监听与事件委托举例详解(前端小白必学)

    在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等,下面这篇文章主要给大家介绍了关于JS事件监听与事件委托的相关资料,需要的朋友可以参考下
    2024-07-07
  • JavaScript中的console.dir()函数介绍

    JavaScript中的console.dir()函数介绍

    这篇文章主要介绍了JavaScript中的console.dir()函数介绍,console.dir主要用来dump某些对象的详细信息,需要的朋友可以参考下
    2014-12-12
  • javaScript中slice函数用法实例分析

    javaScript中slice函数用法实例分析

    这篇文章主要介绍了javaScript中slice函数用法,较为详细的分析了javascript中slice函数的功能、定义及使用方法,需要的朋友可以参考下
    2015-06-06
  • JavaScript实现页面高亮操作提示和蒙板

    JavaScript实现页面高亮操作提示和蒙板

    这篇文章主要介绍了JavaScript实现页面高亮操作提示和蒙板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 关于Javascript 对象(object)的prototype

    关于Javascript 对象(object)的prototype

    Javascript中的每个对象(object)都会有 prototype，下面为大家介绍下其具体的应用
    2014-05-05
  • 用javascript实现div可编辑的常见方法

    用javascript实现div可编辑的常见方法

    用javascript实现div可编辑的常见方法...
    2007-10-10
  • 微信小程序swiper实现滑动放大缩小效果

    微信小程序swiper实现滑动放大缩小效果

    这篇文章主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • JavaScript实现横版菜单栏

    JavaScript实现横版菜单栏

    这篇文章主要为大家详细介绍了JavaScript实现横版菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 9个javascript语法高亮插件 推荐

    9个javascript语法高亮插件 推荐

    语法高亮效果使用非常频繁，特别是在博客里展示各种代码的时候，可以让代码更易读。我们身边就有很多语法高亮的插件，其中大部分是用javascript写的，也有一些是通过server端语言实现（比如Phyton或Ruby）。
    2009-07-07

最新评论