`
shirly521
  • 浏览: 1484 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

js遮罩弹出层

阅读更多

好好学习天天向上

 

1、链接单机事件

<a id="qqhm_open1" onclick=$("#qqhmsz_tb").show();$(this).hide();

单击出发事件,然后隐藏自己。

2、遮罩弹出层的应用(这是一个jsp完整代码)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>可移动的弹出框</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<style type="text/css">

<!--

* {

padding:0;

margin:0;

}

#upcontent {

list-style-positionoutside;

list-style-imagenone;

list-style-typenone;

}

#upcontent li {

font-size:12px;

color:#333;

line-height:150%;

}

#bodyL {

float:left;

width:84px;

margin-right:2px;

}

#tittleup {

font-size:14px;

font-weight:bold;

color:#000066;

padding-left:25px;

border-bottom-width1px;

border-bottom-stylesolid;

border-bottom-color#d0daec;

margin-bottom10px;

padding-bottom10px;

}

a.od {

float:right;

font-size:14px;

color#CC0000;

text-decorationnone;

}

a.od:hover {

color:#FF0000;

}

#fd {

background:#EDF1F8;

border2px solid #849BCA;

margin-top:2px;

margin-left:2px;

float:left;

overflow:hidden;

position:absolute;

left:380px;

top:200px;

cursor:move;

float:left;/*filter:alpha(opacity=50);*/

z-index10;

}

.contentup

{

padding:20px;

}

}

-->

</style>

  </head>

  <body>

    <a href="http://hi.baidu.com/521_yangyang/home" target="_blank">我的百度空间:"爱上小桥流水"</a>

<br/>

<div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> [打开层] </a> </div>

<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">

  <div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关 闭 </a>

    <div id="tittleup">小小的程序员</div>

    <ul id="upcontent">

      <li><span style='font-weight: bold; color:red;'>章鱼哥:</span> 你是做什么的呢? 是做销售代表、还是做软件开发呀</li>

      <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>海绵宝宝:</span></span>做软件开发的,累着、乐着、还活着!你可有好的工作介绍下呢。</li>

      <li><span style='font-weight: bold; color:red;'>章鱼哥:</span>兄弟,我也迷茫呀,如果你有好的路告诉我... </li>

    </ul>

  </div>

</div>

<script type="text/javascript">

    var prox;

    var proy;

    var proxc;

    var proyc;

var isIe=(document.all)?true:false//是否是IE浏览器

function setSelectState(state)

{

var objl=document.getElementsByTagName('select');

for(var i=0;i<objl.length;i++)

{

objl[i].style.visibility=state;

}

}

function mousePosition(ev)

{

if(ev.pageX || ev.pageY)

{

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

//关闭窗口

function closeWindow()

{

if(document.getElementById('back')!=null)

{

document.getElementById('back').parentNode.removeChild(document.getElementById('back'));

}

if(document.getElementById('mesWindow')!=null)

{

document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));

}

if(isIe)

{

setSelectState('');

}

}

    function show(id,ev){/*--打开--*/

closeWindow();

var bWidth=parseInt(document.documentElement.scrollWidth); //当前窗口的宽度

var bHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt(document.documentElement.scrollHeight);

if(isIe)

{

setSelectState('hidden');

}

var back=document.createElement("div"); /*-- 创建遮罩层 --*/

back.id="back";

var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";

styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;"//遮罩样式透明度

back.style.cssText=styleStr;

document.body.appendChild(back);

        clearInterval(prox);

        clearInterval(proy);

        clearInterval(proxc);

        clearInterval(proyc);

        var o = document.getElementById(id);

        o.style.display = "block";

        o.style.width = "1px";

        o.style.height = "1px"

        prox = setInterval(function(){openx(o,500)},10);

    }    

    

    function openx(o,x){/*--打开x--*/

        var cx = parseInt(o.style.width);

        if(cx < x)

        {

            o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";

            //o.style.width = (cx + 100) +"px";

        }

        else

        {

            clearInterval(prox);

            proy = setInterval(function(){openy(o,200)},10);  //200是弹出层的高度

        }

    }  

      

    function openy(o,y){/*--打开y--*/    

        var cy = parseInt(o.style.height);

        if(cy < y)

        {

            o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";

            //o.style.height = (cy + 100) +"px";

        }

        else

        {

            clearInterval(proy);            

        }

    }

        

    function closeed(id){/*--关闭--*/

closeWindow();

        clearInterval(prox);

        clearInterval(proy);

        clearInterval(proxc);

        clearInterval(proyc);        

        var o = document.getElementById(id);

        if(o.style.display == "block")

        {

            proyc = setInterval(function(){closey(o)},10);            

        }        

    }

        

    function closey(o){/*--打开y--*/    //实际上是关闭的特效动作

        var cy = parseInt(o.style.height);

        if(cy > 0)

        {

            o.style.height = (cy - Math.ceil(cy/5)) +"px";   //缩小之后在隐藏

        }

        else

        {

            clearInterval(proyc);                

            proxc = setInterval(function(){closex(o)},10);

        }

    }    

    function closex(o){/*--打开x--*/

        var cx = parseInt(o.style.width);

        if(cx > 0)

        {

            o.style.width = (cx - Math.ceil(cx/5)) +"px";

        }

        else

        {

            clearInterval(proxc);

            o.style.display = "none"//隐藏

        }

    }    

    

    

    /*-------------------------鼠标拖动---------------------*/    

    var od = document.getElementById("fd");    

    var dx,dy,mx,my,mouseD;

    var odrag;

    var isIE = document.all ? true : false;

    

    document.onmousedown = function(e){

    

        var e = e ? e : event;

        if(e.button == (document.all ? 1 : 0))

        {

            mouseD = true;            

        }

    }

    

    document.onmouseup = function(){

    

        mouseD = false;

        odrag = "";

        if(isIE)

        {

            od.releaseCapture();

            od.filters.alpha.opacity = 100;

        }

        else

        {

            window.releaseEvents(od.MOUSEMOVE);

            od.style.opacity = 1;

        }        

    }

    

    

    //function readyMove(e){    

    od.onmousedown = function(e){

        odrag = this;

        var e = e ? e : event;

        if(e.button == (document.all ? 1 : 0))

        {

            mx = e.clientX;

            my = e.clientY;

            od.style.left = od.offsetLeft + "px";

            od.style.top = od.offsetTop + "px";

            if(isIE)

            {

                od.setCapture();    //releaseCapture与 setCapture方法相反,释放鼠标监控            

                od.filters.alpha.opacity = 50;

            }

            else

            {

                window.captureEvents(Event.MOUSEMOVE);

                od.style.opacity = 0.5;

            }

        } 

    }

    document.onmousemove = function(e){

        var e = e ? e : event;

        if(mouseD==true && odrag)

        {        

            var mrx = e.clientX - mx;

            var mry = e.clientY - my;    

            od.style.left = parseInt(od.style.left) +mrx + "px";

            od.style.top = parseInt(od.style.top) + mry + "px";            

            mx = e.clientX;

            my = e.clientY;

        }

    }

function showBackground(obj,endInt)

{

obj.filters.alpha.opacity+=1;

if(obj.filters.alpha.opacity<endInt)

{

setTimeout(function()

{

showBackground(obj,endInt)},8);

}

}

</script>

  </body>

</html>

<!--EndFragment-->
分享到:
评论

相关推荐

    19款 jquery-css3 js遮罩弹出层(浮动窗口)特效.rar

    本源码收集了19款基于jquery-css3实现的js遮罩弹窗效果,弹出层,就是大家熟悉的浮动窗口,由html5 CSS3 JS jQuery联合实现的可自定义的弹出窗口,实例效果丰富,调用简单,初学者也可看懂。一个HTML5页面演示了19种...

    js带遮罩弹出层登录注册表单.zip

    "js带遮罩弹出层登录注册表单.zip" 是一个包含JavaScript实现的动态效果资源,主要功能是在网页上实现带有遮罩层的弹出式登录、注册和找回密码表单。这些功能对于提升用户体验和网站安全性至关重要。 首先,让我们...

    jQuery弹出层插件三种简单遮罩弹出框效果

    本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果",以及如何利用jQuery实现这些效果。 首先,让我们了解什么是弹出层和遮罩弹出框。弹出层(Popup Layer)是一种常见的网页交互设计,当用户...

    js制作带有遮罩弹出层实现登录注册表单代码特效

    在本案例中,“js制作带有遮罩弹出层实现登录注册表单代码特效”涉及了几个关键知识点,包括JavaScript的基本操作、DOM操作、CSS样式以及用户交互设计。 首先,JavaScript在网页中的作用是为静态HTML添加动态功能。...

    jQuery点击遮罩弹出层固定网页中间.rar

    在本项目中,“jQuery点击遮罩弹出层固定网页中间.rar”是一个用于创建网页弹出层的资源包,特别适合于手机端的交互设计。它包含以下四个主要部分:`index.html`(主页面文件)、`images`(图像文件夹)、`js`...

    jQuery弹出层插件三种简单遮罩弹出框效果.rar

    《jQuery弹出层插件:实现简单遮罩弹出框效果》 在Web开发中,弹出层(Modal)是一种常见的交互元素,用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来...

    带有遮罩弹出层实现登录注册表单代码特效.zip

    在IT行业中,网页交互设计是用户体验的关键因素之一,而弹出层(modal dialog)和遮罩效果则是增强这种体验的有效工具。...通过实践和修改这些代码,你可以定制自己的遮罩弹出层,以满足不同项目的需求。

    jQuery点击遮罩弹出层固定居中代码.zip

    本资源“jQuery点击遮罩弹出层固定居中代码.zip”提供了一种实现自适应遮罩弹窗的解决方案,特别适用于移动设备。下面我们将深入探讨相关知识点。 首先,我们来理解“遮罩弹出层”。在网页中,遮罩层通常是一个半...

    lhgdialog弹出层,遮罩层效果源码示例

    "lhgdialog"是一个JavaScript库,专为创建各种类型的弹出层效果而设计,其中包括带或不带遮罩层的窗口,以及具有返回值功能、定位弹出窗口和随滚动条滚动等功能。下面我们将详细探讨这些知识点。 1. 弹出层(Pop-up...

    jQuery点击遮罩弹出层固定网页中间

    "jQuery点击遮罩弹出层固定网页中间"这个主题涉及到的技术点主要是利用jQuery来实现用户交互,特别是当用户点击页面上的某个元素时,会触发一个遮罩层,并在页面中央弹出一个对话框或信息窗口。 首先,我们要理解...

    JS移动端点击弹出遮罩层

    "JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计,它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层,通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...

    jQuery简洁遮罩弹出层代码.rar

    jQuery简洁遮罩弹出层代码是网页开发中常用的一种交互设计技术,主要用于创建弹出式窗口,例如对话框、提示信息或表单填写界面。它利用JavaScript库jQuery的强大功能,结合CSS来实现页面上的动态效果。在这个案例中...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层&lt;/div&gt; 并随页面...

    小程序css实现遮罩弹出层

    - 在JavaScript文件中,我们需要添加逻辑来控制遮罩层和弹出层的显示和隐藏。例如,可以使用`wx.showModal`或自定义组件来实现弹窗的显示和关闭。当需要弹出时,修改对应的类的`display`属性为`block`,并在关闭时...

    js 遮罩层弹出对话框 很简单得

    js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得

    js 弹出遮罩层

    在JavaScript编程中,"弹出遮罩层"是一种常见的用户界面设计手法,它通常用于创建一个半透明的覆盖层,以突出显示特定区域或者暂停其他交互,为用户提供一种聚焦的体验。例如,当我们需要显示模态对话框、加载提示...

    简单实用的jquery可拖动弹出层,遮罩层

    在网页设计和开发中,交互性和用户体验是至关重要的因素,其中弹出层和遮罩层是常见的增强用户体验的工具。本文将深入探讨“简单实用的jQuery可拖动弹出层,遮罩层”这一主题,旨在帮助开发者了解如何利用jQuery实现...

    jQuery点击事件遮罩弹出层可移动特效代码.zip

    "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

Global site tag (gtag.js) - Google Analytics