js形成页面的一种遮罩效果实例代码

 这篇文章主要介绍了js形成页面的一种遮罩效果实例代码,有需要的朋友可以参考一下

用这锻代码 之前请先下载jquery库
 
代码如下:
var maskStackCount = 0;
 
function mask(method){
 
//这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window)
 
var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");
 
        if(typeof method == "undefined"){
            method="open";
        }
        if (method == "open") {
            if (maskStackCount <= 0) {
                var mask = $("<div id='window-mask' class='window-mask' style='display:none'></div>").appendTo("body");
                mask.css({
                    width:     winObj.width() + "px",
                    height:     winObj.height() + "px",
                    filter: "alpha(opacity=60)"
                }).show();
                    winObj.on("resize.mask", function(){
                    mask.css({
                        width:     winObj.width() + "px",
                        height:     winObj.height() + "px"
                    });
                });
            }
            maskStackCount++;
        }
        else if(method == "close"){
            maskStackCount--;
            $("#window-mask").remove();
                winObj.off("resize.mask");
        }

 
 

时间: 2024-10-01 13:22:46

js形成页面的一种遮罩效果实例代码的相关文章

js形成页面的一种遮罩效果实例代码_javascript技巧

用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");         if(typeof met

jQuery实现点击弹出背景变暗遮罩效果实例代码_jquery

本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

Android xml实现animation的4种动画效果实例代码_Android

animation有四种动画类型:分别为alpha(透明的渐变).rotate(旋转).scale(尺寸伸缩).translate(移动),二实现的分发有两种,一种是javaCode,另外一种是XML,而我今天要说的是XML实现的方法,个人感觉javaCode的实现方法比xml要简单,所以有需要的可以自己去找找资料看看. 先给大家展示下效果图,如果大家感觉还不错,请继续往下阅读. 下面是我的四个xml文件,分别代表这四种动画类型. alpha.xml COde: <?xml version=&quo

Android xml实现animation的4种动画效果实例代码

animation有四种动画类型:分别为alpha(透明的渐变).rotate(旋转).scale(尺寸伸缩).translate(移动),二实现的分发有两种,一种是javaCode,另外一种是XML,而我今天要说的是XML实现的方法,个人感觉javaCode的实现方法比xml要简单,所以有需要的可以自己去找找资料看看. 先给大家展示下效果图,如果大家感觉还不错,请继续往下阅读. 下面是我的四个xml文件,分别代表这四种动画类型. alpha.xml COde: <?xml version=&quo

JS小功能(offsetLeft实现图片滚动效果)实例代码_javascript技巧

效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

用js+iframe形成页面的一种遮罩效果的具体实现_javascript技巧

用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']"); if(typeof method == &

JS关闭窗口与JS关闭页面的几种方法小结

 本篇文章要是对JS关闭窗口与JS关闭页面的几种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 第一种:JS定时自动关闭窗口 <script language="javascript"> <!-- function closewin() { self.opener=null; self.close(); } function clock() { i=i-1 document.title="本窗口将在" + i + "秒后

通过jquery实现页面的动画效果(实例代码)_jquery

有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

js+flash实现的5图变换效果广告代码(附演示与demo源码下载)_javascript技巧

本文实例讲述了js+flash实现的5图变换效果广告代码.分享给大家供大家参考,具体如下: 这是一款类似淘宝图片广告的js+flash广告代码.非常美观实用! 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"