<html>
<head>
    <title></title>
    <script src="jquery-1.8.2.js"></script>
    <style type="text/css">
        .popWindow {
            /*#9D9D9D;*/
            width: 100%; /*把整个页面用这个div罩起来*/
            height: 100%;
            left: 0;
            top: 0;
            filter: alpha(opacity=50);
            opacity: 0.5; /*设置透明度，可以看到却无法操作*/
            z-index: 1; /*z-index 数值大的div在最上面*/
            position: absolute;
        }
 
        .maskLayer {
           
            width: 200px;
            height: 30px;
            line-height: 30px;
            left: 50%;
            top: 50%;
            color: #fff;
            z-index: 2;
           position: fixed;
            text-align: center;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function showDiv() {
            $("#popWindow").show();//蒙版层divshow，
            $("#maskLayer").show();//可操作层show
         
        }
        function closeDiv() {
            $("#popWindow").hide();//蒙版层divshow，
            $("#maskLayer").hide();//可操作层show
        }
 
        //===========================
        $(function () {
            moveModalDiv();
        });//加载完毕
 
        //可移动蒙版层出现的div
        function moveModalDiv() {
            var moveDiv = false; var x; var y;
            $("#maskLayer").mousedown(function () {//点下鼠标
                moveDiv = true;
                $("#maskLayer").css("cursor","move");
                x = event.x - $("#maskLayer").offset().left;
                y = event.y - $("#maskLayer").offset().top;
              
            });
 
            $("#maskLayer").mouseup(function () {//鼠标起来
                moveDiv = false;
                $("#boolDiv").text(moveDiv);
            });
            $("#maskLayer").mouseleave(function () {//鼠标离开  因为迅速滑动的时候，有时无法触发 mouseup所以加上这个事件
                moveDiv = false;
                $("#boolDiv").text(moveDiv);
            });
            $("#maskLayer").mousemove(function () {//移动鼠标
                if (moveDiv == true) {
                    $("#boolDiv").text(moveDiv);
                    $("#maskLayer").css({ "position": "absolute", "left": event.x - x, "top": event.y - y });
                }
                else {
                    $("#boolDiv").text(moveDiv);
                }
            });
        }
    </script>
</head>
<body>
    <div onclick="showDiv()" style="display:block; cursor:pointer">
        弹出蒙板
    </div>
    <div id="popWindow" class="popWindow" style="display: none;">
    </div>
    <div id="maskLayer" class="maskLayer" style="display: none;">
        <a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;" >
            关闭蒙板
        </a>
        <div id="boolDiv"></div>
    </div>
</body>
</html> 

--------------------------------移动

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Qing's Web</title>
 
    <script src="jquery-1.8.2.js"></script>
    <style type="text/css">
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
 
        .moveBar {
            position: absolute;
            width: 250px;
            height: 300px;
            background: #666;
            border: solid 1px #000;
        }
 
        #banner {
            background: #52CCCC;
            cursor: move;
        }
    </style>
</head>
<body style="padding-top: 50px;">
 
    <div class="moveBar">
        <div id="banner">按住此处移动当前div</div>
        <div class="content">这里是其它内容</div>
    </div>
    <div class="footer">
        <p align="center" class="label">ALL Rights Reserved Qing 版权所有</p>
    </div>
    <script>
        jQuery(document).ready(
        function () {
            $('#banner').mousedown(
            function (event) {
                var isMove = true;
                var abs_x = event.pageX - $('div.moveBar').offset().left;
                var abs_y = event.pageY - $('div.moveBar').offset().top;
                $(document).mousemove(function (event) {
                    if (isMove) {
                        var obj = $('div.moveBar');
                        obj.css({ 'left': event.pageX - abs_x, 'top': event.pageY - abs_y });
                    }
                }
                ).mouseup(
                function () {
                    isMove = false;
                }
                );
            }
            );
        }
        );
    </script>
</body>

</html>  
============

   function setHistoryMove() {
 
            var leftLocation = 0;
            var topLocation = 0;
            var boolMove = false;
            event = event || window.event;
            
 
            $("#headHistory").mousedown(function () {
                boolMove = true;
                leftLocation = event.x - $("#mainHistory").offset().left;
                topLocation = event.y - $("#mainHistory").offset().top;
            })
            document.body.onmouseup = function () {
                boolMove = false;
            }
            document.body.onmousemove = function () {
                if (boolMove == true) {
                    $("#mainHistory").css({ "left": event.x - leftLocation, "top": event.y - topLocation });
                }
            }
            // 由于鼠标在滑动的时候如果速度稍微快一点，就会使用 鼠标离开 div，div就不移动了。所以使用 document.body的触发鼠标事件
 
 
            /*
            .mouseleave(function () {
                boolMove = false;
 
            }).mouseup(function () {
                boolMove = false;
 
            })
 
            .mousemove(function () {
                if (boolMove == true) {
                    $("#mainHistory").css({ "left": event.x - leftLocation, "top": event.y - topLocation });
                }
 
            });
 
            */
 

}

div蒙版+可移动的更多相关文章

  1. Jquery数字转盘：

    项目中,在充值流程中,加入了1个抽奖环节,需要转盘显示抽中的虚拟货币.网上找了相关的特效,最后锁定在这个特效上:http://www.jb51.net/jiaoben/319636.html.因为用的 ...

  2. 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

    整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中 ...

  3. 带蒙版的提交loading页面实现

    废话不多说,直接上代码. 首先是HTML中层的实现: <!-- loading 层 --> <div id="loadingDivBack" style=&quo ...

  4. WinForm 简单蒙版实现控件遮盖

    在Web上面要实现一个遮罩层或者说是蒙版吧,有了DIV那不算什么难事,只要给div定好位置和大小,把颜色的Alpha值设一下就有透明的效果.不过在Winform中实现起来就没那么简单了事.尝试过用一个 ...

  5. html+css图片下弹出蒙版

    鼠标移入时弹出蒙版!!! html<!DOCTYPE html<html lang="en"<head> <meta charset="UT ...

  6. 黑色遮罩引导蒙版 CSS实现方式

    一.微云的实现 网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的. 然后上周五我去微云转悠的时候,也看到了引导层 ...

  7. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  8. CSS蒙版

    蒙版:就是在图片上添加一个图层,用于美化页面,增加页面的可读性 <!DOCTYPE html><html><head lang="en"> &l ...

  9. JGUI源码：实现蒙版层显示(18)

    有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute.宽高100%.设置z-index置于顶层,设置半透明效果,fadein,fadeou ...

随机推荐

  1. 阿里云ubuntu搭建SVN服务器

    系统:Ubuntu 14.04 64位 新手注意:连接到服务器之后,默认会在用户文件夹位置“~”,使用cd /命令可以回到根目录.SVN搭在公共的位置比较稳妥. 1.通过apt-get安装subver ...

  2. hihocoder 1049 后序遍历

    #1049 : 后序遍历 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在参与过了美食节之后,小Hi和小Ho在别的地方又玩耍了一阵子,在这个过程中,小Ho得到了一个非常 ...

  3. Git CMD - config: Get and set repository or global options

    命令参数 --get 获取指定的配置项. --global 对于写选项:全局配置,将参数配置于 ~/.gitconfig 而不是仓库目录下的 .git/config.对于读选项:只从 ~/.gitco ...

  4. Connection to https://dl-ssl.google.com refused 解决方案

    源  起 由于国内不能直接访问Google设在国外的服务器,因此更新Android SDK的时候会遇到 refused 的情况,在命令行ping dl-ssl.google.com显示“请求超时”,解 ...

  5. 每天一道LeetCode--342. Power of Four

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  6. UML-用例

  7. WinForm 实现登录，验证成功，关闭登录界面，显示主界面

    点击登录按钮时: ") { this.DialogResult = DialogResult.OK; this.Close(); } else { MessageBox.Show(" ...

  8. java匹配中文汉字的正则表达式

    正则表达式匹配中文先要了解中文的编码 代码如下 复制代码 [u4E00-u9FA5]汉字?[uFE30-uFFA0]全角字符 [u4E00-u9FA5]汉字?[uFE30-uFFA0]全角字符 匹配中 ...

  9. 谷歌（Chrome）安装Advanced REST Client插件

    进入Extensions(工具——>扩展程序) 点击Get More extensions或新建标签页点击网上应用店 如果加载太慢,出现chrome网上应用店无法打开,显示暂时无法加载该应用的画 ...

  10. UIDynamic 基础认识

    UIDynamic 是从iOS 7开始引入的一种新技术,属于UIKit框架,可以模拟现实生活中的物理现象,如:碰撞.抖动.摆动等 动力效果:有一个效果器,叫做“动力效果器”里面面可以添加“动力效果” ...