模仿网易彩票网(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. 【转】关于FPGA中建立时间和保持时间的探讨

      时钟是整个电路最重要.最特殊的信号,系统内大部分器件的动作都是在时钟的跳变沿上进行, 这就要求时钟信号时延差要非常小, 否则就可能造成时序逻辑状态出错:因而明确FPGA设计中决定系统时钟的因素,尽 ...

  2. Ubuntu 下启动/停止/重启mysql服务

    1:sudo start mysql 2:sudo stop mysql 3:sudo restart mysql

  3. 通过Shell和Redis来实现集群业务中日志的实时收集分析

    http://www.linuxidc.com/Linux/2013-05/83935.htm

  4. cf C. Maze

    http://codeforces.com/problemset/problem/378/C #include <cstdio> #include <cstring> #inc ...

  5. BZOJ3296: [USACO2011 Open] Learning Languages

    3296: [USACO2011 Open] Learning Languages Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 81  Solved: ...

  6. FTP服务器上删除文件夹失败

    很多人都知道:要删除FTP服务器上的文件夹时,必须确保文件夹下面没有其他文件,否则会删除失败! 可是,有些服务器考虑到安全等因素,通常会隐藏以点开始的文件名,例如“.test.txt”.于是,有的坏人 ...

  7. 3DES加密算法

    在日常设计及开发中,为确保数据传输和数据存储的安全,可通过特定的算法,将数据明文加密成复杂的密文.目前主流加密手段大致可分为单向加密和双向加密. 单向加密:通过对数据进行摘要计算生成密文,密文不可逆推 ...

  8. 如何避免被C++默认拷贝构造函数忽悠?

    一.背景介绍           因为工作关系,需要用到C++编程.对于我来说,虽然一直从事的是linux平台下的嵌入式软件开发,但深入用到C++的特性的地方并不多.对于C++,用得最多的无非是指针. ...

  9. C#运行时鼠标移动控件 - 调用Windows API(ReleaseCapture)

    [System.Runtime.InteropServices.DllImport("user32.dll")] public static extern bool SendMes ...

  10. C++ 用libcurl库进行http通讯网络编程[转]

    http://www.cnblogs.com/moodlxs/archive/2012/10/15/2724318.html 目录索引: 一.LibCurl基本编程框架 二.一些基本的函数 三.cur ...