<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. 关于64位Linux编译hadoop2

    Apache官方提供hadoop2的安装包是在32位机器下编译的,生产环境一般使用64的Linux,那么需要在64位机器下重新编译可以查看hadoop-2.2.0-src下的BUILDING.txtB ...

  2. Android混淆打包配置总结

    Android打包失败出现Proguard returned with error code 1. See console的错误 这个问题是由于代码混淆引起的,找不到引用包. 只需在你的proguar ...

  3. Linux时间函数

    一.时间编程 1.核心理论 (1).时间类型 2.函数学习 (1).获取日历时间 函数名:time 函数原型:time_t time(time_t *t) 函数功能:获取当前日历时间 所属头文件:&l ...

  4. 4632 NOIP[2015] 运输计划

    4632 NOIP[2015] 运输计划  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解       题目描述 Description 公元 2044 ...

  5. trigger,triggerhandler模拟事件

    常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使 ...

  6. android不依赖具体activity弹出Dialog对话框，即全局性对话框

    最近在DialogUtil类中声明了一个静态的弹出Dialog方法,弹出的Dialog也是静态的,并且只在第一次进行创建,由于Dialog弹出依附于Activity,所以就出现了问题. 即:第一次调用 ...

  7. 第四十三篇、利用NSProxy解决NSTimer内存泄漏问题

    问题描述: 用NSTimer来实现每隔一定时间执行制定的任务,例如最常见的广告轮播图.如果我们在 timerWithTimeInterval:1 target:self 中指定target为当前控制器 ...

  8. C# 微信扫码支付 回调页面

    .NET版 微信扫码支付,官方推荐使用[模式二] 一.微信扫码支付模式一: 1.回调页面:官方demo中example文件下的NativeNotifyPage.aspx 2.微信回调地址:http:/ ...

  9. 类的构造器[constructor]_C#

    类的构造器(constructor): 1.       先看两个类定义: class A{ } 相当于: class A: object { Public A ( ) : base( ) {   } ...

  10. c# winform 点菜宝接口demo程序

    前几天写了一篇关于c#调用 win32API的文章,有同学对点菜宝接口感兴趣,所以就把写的demo程序共享出来,大家一起讨论改进,so放百度云地址: 百度云下载地址