<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. JavaScript面试问题：事件委托和this

            JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由 于有着各种各样的背景,所以不是每个人都对 ...

  2. asp.net运行原理（一）总体概要

     1.浏览器发送请求报文到服务器,服务器接收到请求之后,根据请求报文头(url地址)的后缀名解析. 2.以iis服务器为例.他分为两种模式,经典模式和集成模式.主要是经典模式会将请求报文通过aspne ...

  3. KSImageNamed-Xcode插件在xcode 6.4/6.3或其他版本中不能使用解决方案

    大家都知道这个插件很强大,但是现在这个插件最新版貌似只支持xcode7 ,需要修改KSImageNamed-xcode中的一个配置文件,添加uuid才能使他支持xcode6.3或6.4 进入下载的插件 ...

  4. block回调具体例子

    //main.m ////  main.m//  回调////  Created by hehe on 15/9/10.//  Copyright (c) 2015年 wang.hehe. All r ...

  5. JavaScript学习笔记(12)——JavaScript自定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. c# 如何处理自定义消息

    C#自定义消息通信往往采用事件驱动的方式实现,但有时候我们不得不采用操作系统的消息通信机制,例如在和底层语言开发的DLL交互时,是比较方便的.下面列举了一些实现方式,供大家参考:一.通过SendMes ...

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

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

  8. private继承

    private继承并不如public继承一样具有is-a的关系. ------------------------------------------------------------------- ...

  9. linux同步

    1. 内核同步 主要是防止多核处理器同时访问修改某段代码,或者在对设备驱动程序进行临界区的保护. 1 .互斥量 头文件 #include<linux/mutex.h> 初始化方法: 静态初 ...

  10. 普通树（有根树）C++

    对于普通树实现的细节包括 1 树结点的结构体 2 初始化及删除树结点(关注内存泄露) 3 递归先序遍历 4 通过关键值的查询操作,返回关键值的结点 5 凹入表实现 6 广义表实现 7 非递归先序遍历, ...