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

用这锻代码 之前请先下载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-08-22 14:23:30

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

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

 这篇文章主要介绍了js形成页面的一种遮罩效果实例代码,有需要的朋友可以参考一下 用这锻代码 之前请先下载jquery库   代码如下: var maskStackCount = 0;   function mask(method){   //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window)   var winObj=window.top.$("body").find("iframe[name='dialog

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

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

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

dedecms页面如何获取会员状态的实例代码_javascript技巧

dedecms页面如何获取会员状态的实例代码 前几天做了一个企业网站,导航栏增加了会员信息,如: 已登陆:显示:欢迎<会员名> 未登陆 显示: 请登录 代码如下: 复制代码 代码如下: {dede:php} require_once(DEDEMEMBER."/config.php"); $uid = $cfg_ml->M_LoginID; if(!$uid){ echo ' <div><a class="login-button"

js下通过getList函数实现分页效果的代码_javascript技巧

用js实现页面的分页: 复制代码 代码如下: <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#D2EBF3;" height="32"> <tr><td align="right" bgColor="#

js仿百度有啊通栏展示效果实现代码_javascript技巧

效果图如下: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

js图片向右一张张滚动效果实例代码_javascript技巧

先来张效果图 样式 复制代码 代码如下:         #div_left{float:left;width:60px;height:86px;}        #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}        #starScroll #contentScr

JS实现模仿微博发布效果实例代码_javascript技巧

效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

js实现收缩菜单效果实例代码_javascript技巧

废话不多说,直接上代码: 有注释 复制代码 代码如下: <head>    <title></title>    <style type="text/css">        div        {            border: 1px solid black;            width: 100px;        }        ul .tit, .content        {            list-