<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. [改善Java代码]asList方法产生的List对象不可更改

    上一个建议之处了asList方法在转换基本类型数组时候存在的问题,在看下asList方法返回的列表有何特殊的地方.看代码: import java.util.Arrays; import java.u ...

  2. asp.net上传大文件

    Asp.net默认允许上传文件的最大值为4M. 如果想要上传更大的文件,需要修改web.config文件,方法是: 在<system.web>节点中添加代码 <httpRuntime ...

  3. 核心概念 —— 服务提供者

    1.简介 服务提供者是Laravel应用启动的中心,你自己的应用以及所有Laravel的核心服务都是通过服务提供者启动. 但是,我们所谓的"启动"指的是什么?通常,这意味着注册事物 ...

  4. Jersey(1.19.1) - Deploying a RESTful Web Service

    JAX-RS provides a deployment agnostic abstract class Application for declaring root resource and pro ...

  5. ASP常用函数

    取得IP地址 '******************************************************************* Function Userip() Dim Ge ...

  6. 浅谈.NET中加密和解密的实现方法分享

    这篇文章介绍了.NET中加密和解密的实现方法,有需要的朋友可以参考一下 .NET将原来独立的API和SDK合并到一个框架中,这对于程序开发人员非常有利.它将CryptoAPI改编进.NET的Syste ...

  7. response小结（二）——文件下载

    我们先来看一个最简单的文件下载的例子: package com.yyz.response; import java.io.FileInputStream; import java.io.IOExcep ...

  8. mssql 查询效率

    (1)临时表.表变量 据说:当数据量<100行数据时使用表变量,数据量较大时使用临时表(可创建索引提高查询效率). 表变量只能创建主键或唯一索引,准确讲是约束不是索引. (2)存储过程直接在查询 ...

  9. Agile.Net 组件式开发平台 - 平台系统介绍

    平台介绍 Agile.Net 组件式开发平台是一款针对企业级产品的开发框架,平台架构基于SOA服务体系,多层组件式架构打造.平台提供企业应用开发所需的诸如ORM.IOC.WCF.EBS.SOA等分布式 ...

  10. c#输出json,其中包含子json （可以含 无限级 子json）的方法思路

    首页 给出  DataTable 转Json 的方法: public static string TableToJson(DataTable dt) { List<Dictionary<s ...