模仿网易彩票网（http://caipiao.163.com/）的登陆框自己做了一个拖动层，不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态（cursor:text;)

<!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>

<style>

body{padding:0; margin:0; width:100%; height:100%;}

* html,* html body{background-image:url(about:blank);background-attachment:fixed}

#dragWp{width:100%; height:100%; position:fixed; left:0; top:0; z-index:99999999; _position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop))}

#dragBg{ width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; opacity:0.4; filter:alpha(opacity=40);}

#dragMain{width:200px;height:100px;position:absolute; border:1px solid #999;line-height:30px;font-size:16px;text-align:center; background-color:#FFF;}

#dragTitle{ width:100%; height:40px; line-height:40px; background-color:#ccc; cursor:move;}

#close{float:right; margin-right:5px; z-index:999; font-size:12px; font-style:normal; cursor:pointer;}

</style>

</head>

<body>

<div style="height:1200px; text-align:center;">

    <h1>hello world</h1>

</div>

<div id="dragWp">

    <div id="dragBg"></div>

    <div id="dragMain">

        <div id="dragTitle">

            <em id="close">关闭</em>拖动层

        </div>

        hello world

    </div>

</div>

<script>

window.onload=function(){

    var dragWp=document.getElementById("dragWp");

    var dragMainId=document.getElementById("dragMain");

    var w=dragWp.offsetWidth;

    var h=dragWp.offsetHeight;

    dragMainId.style.left=(w-dragMainId.offsetWidth)/2+"px";

    dragMainId.style.top=(h-dragMainId.offsetHeight)/2+"px";

}

function dragTemp(dragWp,dragMainId,dragTitleId,closeId,opacity){

    var dragWp=document.getElementById(dragWp);

    var dragMainId=document.getElementById(dragMainId);

    var dragTitleId=document.getElementById(dragTitleId);

    var closeId=document.getElementById(closeId);

    var posX,posY,x,y;

    dragTitleId.onmousedown=function(e){

        var e = e || window.event;

        posX=e.clientX-dragMainId.offsetLeft; //鼠标距离拖动层左侧的距离

        posY=e.clientY-dragMainId.offsetTop;  //鼠标距离拖动层上侧的距离

        dragMainId.style.opacity=opacity;

        dragMainId.style.filter="alpha(opacity="+opacity*100+")";

        document.onmousemove=function(e){

            var e = e || window.event;

            x=e.clientX-posX;

            y=e.clientY-posY;

//            if(x<=0) x=0;    //不允许移出左边

//            else if(x>=document.body.clientWidth-dragMainId.offsetWidth) x=document.body.clientWidth-dragMainId.offsetWidth; //不允许移出右边

            dragMainId.style.left=x+"px";

            dragMainId.style.top=y+"px";

            dragTitleId.style.cursor="move";

            document.onselectstart=function(){ return false } //拖动不选中文字

        }

    };

    document.onmouseup=function(){

        document.onmousemove=null;

        dragMainId.style.opacity=1;

        dragMainId.style.filter="alpha(opacity=100)";

    }

    if(closeId){

        closeId.onclick=function(){

            dragWp.style.display="none";

        }

    }

}

function drag(args){

    dragTemp(args.dragWp,

             args.dragMainId,

             args.dragTitleId,

             args.closeId || null,

             args.opacity || 1)

}

//调用

drag({dragWp:"dragWp",dragMainId:"dragMain",dragTitleId:"dragTitle",closeId:"close",opacity:0.5});

</script>

</body>

</html>

js拖动层的更多相关文章

  1. js拖动层原形版

    脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...

  2. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. 在chrome下鼠标拖动层变文本形状的问题

    学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...

  5. h5滑动方向、手机拖动层

    做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...

  6. 微信小程序-06-详解介绍.js 逻辑层文件-注册页面

    上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...

  7. 微信小程序-05-详解介绍.js 逻辑层文件

    上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...

  8. JS 拖动原理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 拖动层 拖动div 封装js 貌似不兼容FF,郁闷

    原文发布时间为:2009-12-02 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

随机推荐

  1. ios对SQLite3的使用

    ios对SQLite3的使用 一.在Firefox中打开sqlite3(如果没有,选择工具->附加组件,添加即可)新建sqlite3数据库,Contacts, 建立一个members表,字段 i ...

  2. wifi钓鱼教程

    关于 <原创>想钓鱼必须还要有好竿wifi学习教程+软件下载地址修正 因为最近网盘维护 导致资源无法下载 今天早上开通下载服务了大家可以放心下载. 蹭网要低调不要炫耀 软件介绍:Wires ...

  3. std::vector的分片拷贝和插入

    一般我们在用Qt的QByteArrary或者List的时候,会有相应的append的方法,该函数,就是把数据加入末尾.但是std::vector就没有相应的方法.但是我们可以用insert方法来实现: ...

  4. 2014-07-25　改进自定义菜单与使用SVN进行协同开发

    今天是在吾索实习的第13天.今天没有做过多的代码设计,只进行了一些代码的分析与进一步优化.其中,发现创建自定义菜单的关键代码书写可分为两部分: JSON格式的字符串在.net中的语法书写: strin ...

  5. HDU5266---pog loves szh III （线段树+LCA）

    题意:N个点的有向树, Q次询问, 每次询问区间[L, R]内所有点的LCA. 大致做法:线段树每个点保存它的孩子的LCA值, 对于每一次询问只需要 在线段树查询即可. #include <bi ...

  6. 51nod-正整数分组问题(基础方程DP-01背包)

    正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 思路: 这题的实质其实也是0-1背包问 ...

  7. 聚聚科技---PHP开发笔试题及答案

    1. echo(), print(), print_r()的区别? echo是PHP语言结构, print和print_r是函数.语言结构没有返回值,函数可以有返回值(即便没有用)  . print( ...

  8. Maven相关介绍

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  9. WIN7局域网文件共享设置方法

    WIN7局域网文件共享设置方法 工具/原料 两台电脑以上的局域网.WIN7操作系统 步骤/方法 1 右击桌面网络----属性----更改高级共享设置 (注释:查看当前网络 比如:家庭网络.公共网络 等 ...

  10. 10、Cocos2dx 3.0游戏开发找小三之容器篇：Vector、Map、Value

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27705613 容器 3.0版本号之前Cocos2d- ...