<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. 设计包含min函数的栈

    stack<pair<int, int>> sta; void push(int x) { int min_i; if(sta.empty()) { min_i = x; } ...

  2. 关于使用vss版本管理工具中的sln,suo文件作用

    Visual Studio.NET采用两种文件类型(.sln和.suo)来存储特定于解决方案的设置,它们总称为解决方案文件.为解决方案资源管理器提供显示管理文件的图形接口所需的信息 从而在每次继续开发 ...

  3. PS基础学习 2---图层蒙版

    1,蒙版,字面意思上的理解就是:把底层图片上面加上一层图层蒙着,通过画笔工具控制底层图片和上面一层图层的显示效果.常用于图层的无缝隙合成. 我们可以先看一下下面的这个小例子,这个就是蒙版的一个小应用: ...

  4. HDOJ2024C语言合法标识符

    C语言合法标识符 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  5. mysql数据库分组（GROUP BY）查询实例

    1.使用松散(Loose)索引扫描实现 GROUP BY 何谓松散索引扫描实现 GROUP BY 呢?实际上就是当 MySQL 完全利用索引扫描来实现 GROUP BY 的时候,并不需要扫描所有满足条 ...

  6. Visual Studio下SQLite数据库开发环境设置

    由于我们介绍的内容都是基于微软的Visual Studio下开发的Win32平台,所以下边我们介绍Visual Studio下SQLite数据库开发环境设置.具体而言我们有两种方式可以在Visual ...

  7. UIPickerView常见属性、常见方法（包括代理方法和数据源方法）的一些说明

    一.UIPickerView 1.UIPickerView的常见属性 // 数据源(用来告诉UIPickerView有多少列多少行) @property(nonatomic,assign) id< ...

  8. easyui combobox 模糊检索数据并填充

    $("#id"),combobox({ url:'', ......   filter:function(q,row){ var op = $(this).combobox(&qu ...

  9. css3学习笔记之图片

    圆角图片 border-radius: 圆角图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <htm ...

  10. 暑假集训(4)第三弹 -----递推（Hdu1799)

    问题描述:还记得正在努力脱团的小A吗? 他曾经最亲密的战友,趁他绘制贤者法阵期间,暗中设下鬼打墙将小A 围困,并准备破坏小A正在绘制的法阵.小A非常着急.想阻止他的行动.而要阻止他,必须先破解鬼打墙. ...