jQuery--窗体弹窗效果

àì夳堔傛蜴生んèń 2021-09-27 05:02 495阅读 0赞

*  前言
 *  内容
    
     *  显示效果：
        
         *  HTML代码：
         *  CSS代码：
         *  JavaScript代码：
 *  总结
    
     *   *  HTML知识点：
         *  CSS知识点：
         *  JavaScript知识点：
 *  end

# 前言 #

上一篇博客更新了如何书写在网站中看到的动态级联菜单的代码，这篇博客介绍一下我们上网时候打开网站经常可以看到跳出的广告窗口是如何用程序写出来的。

# 内容 #

## 显示效果： ##

点左下角显示窗口按钮，左下角窗体蹦出，点屏幕中间显示窗口，屏幕中间窗体跳出，在进入网页的时候，右下角框自动跳出。  点 左 下 角 显 示 窗 口 按 钮 ， 左 下 角 窗 体 蹦 出 ， 点 屏 幕 中 间 显 示 窗 口 ， 屏 幕 中 间 窗 体 跳 出 ， 在 进 入 网 页 的 时 候 ， 右 下 角 框 自 动 跳 出 。

![这里写图片描述][70]  
下面是代码部分：

### HTML代码： ###

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
            <head>
                <title>JQuery实战-窗口效果</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <link type="text/css" rel="stylesheet" href="css/window.css" />
                <script type="text/javascript" src="js/jquery.js"></script>
                <script type="text/javascript" src="js/window.js"></script>
            </head>
            <body>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                <input type="button" value="左下角显示窗口" id="leftpop" />
                <input type="button" value="屏幕中间显示窗口" id="centerpop" />
                <div class="window" id="center">
                    <div class="title">
                        <img alt="关闭" src="images/close.gif" />
                        我是中间显示窗口的标题栏
                    </div>
                    <div class="content">
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                        <p>我是中间显示窗口的内容区</p>
                    </div>
                </div>
                <div class="window" id="left">
                    <div class="title">
                        <img alt="关闭" src="images/close.gif" />
                        我是左边显示窗口的标题栏
                    </div>
                    <div class="content">
                        我是左边显示窗口的内容区
                    </div>
                </div>
                <div class="window" id="right">
                    <div class="title">
                        <img alt="关闭" src="images/close.gif" />
                        我是右边显示窗口的标题栏
                    </div>
                    <div class="content">
                        我是右边显示窗口的内容区
                    </div>
                </div>
            </body>
        </html>

### CSS代码： ###

.window { background-color: #D0DEF0; width: 250px; /*padding: 2px;*/ margin: 5px; /*控制窗口绝对定位*/ position: absolute; display: none; }
        .content { height: 150px; background-color: white; border: 2px solid #D0DEF0; padding: 2px; /*控制区域内容超过指定高度和宽度时显示滚动条*/ overflow: auto; }
        .title { padding: 4px; font-size: 14px; }
        .title img { width: 14px; height: 14px; float: right; cursor: pointer; }

### JavaScript代码： ###

$(document).ready(function(){ 
            //1.点击按钮可以在屏幕中间显示一个窗口
            //2.点击按钮2可以在屏幕的左下角显示一个窗口
            //3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出
    
            /* *$(".title img").click(function(){ * //关闭按钮点击之后，关闭窗口 * $(this).parent().parent().hide("slow"); *}); */
            var centerwin = $("#center");
            var leftwin = $("#left");
            var rightwin = $("#right");
            $("#centerpop").click(function(){ 
                //鼠标点击按钮之后，把id为center的窗口显示在页面中间
                //计算位于屏幕中间的窗口的左边界和上边界的值
                //浏览器可视区域的宽和高，当前窗口的宽和高
                //需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
                centerwin.show("slow");
            });
            $("#leftpop").click(function() { 
                leftwin.slideDown("slow");
            });
    
            setTimeout(function () { 
                centerwin.mywin({left: "center", top: "center"});
                leftwin.mywin({left: "left", top: "bottom"}, function(){ 
                    leftwin.slideUp("slow");
                });
                var windowobj = $(window);
                var cwinwidth = rightwin.outerWidth(true);
                var cwinheight = rightwin.outerHeight(true);
                var browserwidth = windowobj.width();
                var browserheight = windowobj.height();
                var scrollLeft = windowobj.scrollLeft();
                var scrollTop = windowobj.scrollTop();
                var rleft = scrollLeft + browserwidth - cwinwidth;
                if ($.browser.safari) {
                    rleft = rleft - 15;
                }
                if ($.browser.opera) {
                    rleft = rleft + 15;
                }
                if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
                    rleft = rleft - 20;
                }
                rightwin.mywin({left: "right", top: "bottom"}, function() { 
                    rightwin.hide();
                },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
            },500);
    
        });
    
        /* *$.fn.hello = function() { * alert("hello:" + this.val()); * return this; *} */
    
        /** *@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top *@param hidefunc表示执行窗口隐藏的方法 *@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top */
        $.fn.mywin = function(position, hidefunc, initPos) { 
            if (position && position instanceof Object) {
                var positionleft = position.left;
                var positiontop = position.top;
    
                var left;
                var top;
                var windowobj = $(window);
                var currentwin = this;
                var cwinwidth;
                var cwinheight;
    
                var browserwidth;
                var browserheight;
                var scrollLeft;
                var scrollTop;
                //计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值
                function getBrowserDim() { 
                    browserwidth = windowobj.width();
                    browserheight = windowobj.height();
                    scrollLeft = windowobj.scrollLeft();
                    scrollTop = windowobj.scrollTop();  
                }       
                //计算窗口真实的左边界值
                function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) { 
                    if (positionleft && typeof positionleft == "string") {
                        if (positionleft == "center") {
                            left = scrollLeft + (browserwidth - cwinwidth) / 2; 
                        } else if (positionleft == "left") {
                            left = scrollLeft;  
                        } else if (positionleft == "right") {
                            left = scrollLeft + browserwidth - cwinwidth;
                            if ($.browser.safari) {
                                left = left - 15;
                            }
                            if ($.browser.opera) {
                                left = left + 15;
                            }
                            if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
                                left = left - 20;
                            }
                        } else  {
                            left = scrollLeft + (browserwidth - cwinwidth) / 2; 
                        }
                    } else if (positionleft && typeof positionleft == "number") {
                        left = positionleft;
                    } else {
                        left = 0;
                    }
                }
                //计算窗口真实的上边界值 
                function calTop(positiontop, scrollTop, browserheight, cwinheight) { 
                    if (positiontop && typeof positiontop == "string") {
                        if (positiontop == "center") {
                            top = scrollTop + (browserheight - cwinheight) / 2;
                        } else if (positiontop == "top") {
                            top = scrollTop;
                        } else if (positiontop == "bottom") {
                            top = scrollTop + browserheight - cwinheight;
                            if ($.browser.opera) {
                                top = top - 25;
                            }
                        } else {
                            top = scrollTop + (browserheight - cwinheight) / 2;
                        }
                    } else if (positiontop && typeof positiontop == "number") {
                        top = positiontop;
                    } else {
                        top = 0;
                    }
                }
                //移动窗口的位置
                function moveWin() { 
                    calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
                    calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
                    currentwin.animate({
                        left: left,
                        top: top
                    },600); 
                }
    
                //定义关闭按钮的动作
                currentwin.children(".title").children("img").click(function() { 
                    if (!hidefunc) {
                        currentwin.hide("slow") ;
                    } else {
                        hidefunc();
                    }
                });
    
                if (initPos && initPos instanceof Object) {
                    var initLeft = initPos.left;
                    var initTop = initPos.top;
                    if (initLeft && typeof initLeft == "number") {
                        currentwin.css("left", initLeft);   
                    } else {
                        currentwin.css("left", 0);
                    }
                    if (initTop && typeof initTop == "number") {
                        currentwin.css("top", initTop); 
                    } else {
                        currentwin.css("top", 0);
                    }
                    currentwin.show();
                }
                cwinwidth = currentwin.outerWidth(true);
                cwinheight = currentwin.outerHeight(true);
                currentwin.data("positionleft", positionleft);
                currentwin.data("positiontop", positiontop);
                getBrowserDim();
                moveWin();
    
                var scrollTimeout;
                //浏览器滚动条滚动时，移动窗口的位置
                $(window).scroll(function(){ 
                    //判断一下当前窗口是否可见
                    if (!currentwin.is(":visible")) {
                        return; 
                    }
                    clearTimeout(scrollTimeout);
                    scrollTimeout = setTimeout(function(){ 
                        getBrowserDim();        
                        moveWin();
                    },300);
                });
                //浏览器大小改变时，移动窗口的位置
                $(window).resize(function(){ 
                    //判断一下当前窗口是否可见
                    if (!currentwin.is(":visible")) {
                        return; 
                    }
                    getBrowserDim();    
                    moveWin();  
                });
                //返回当前对象，以便可以级联的执行其他方法
                return currentwin;
            }
        }

这次JavaScript代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！

# 总结 #

### HTML知识点： ###

1.  页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示
2.  让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口设置一定的`padding`值（或者是内容区域设置边框），已达到内容区域和标题栏以后窗口外边的对比，从而看起来是一个窗口的效果

### CSS知识点： ###

1.  正确理解float的效果，实际上会影响到后面的一个元素和float的元数之间的显示效果，因此这个例子中如果html代码中img位于标题栏的最后是，`float：right`导致图片跑到了内容区域的最右边。只有在html里面将img放到标题栏文字的前面，这个时候`float：right`才会使图片刚好位于标题栏的最右边
2.  `overflow`属性值为`auto`时，当内容区域很多超过了定义的高度或宽度时，就会显示滚动条
3.  `position`属性值为`absolute`时，元素将在页面中绝对定位，默认情况是相对页面的左上角进行定位，如果祖先节点中有`position：relative`的定义，则相对这个祖先节点的左上角进行定位

### JavaScript知识点： ###

1.  浏览器可视区域的宽和高可以通过`$(window).width()`和`$(window).height()`的方式来获得
2.  浏览器滚动条的左边界和上边界可以通过`$(window).scrollLeft()`和`$(window).scrollTop()`来获得
3.  窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除2，再加上滚动条的左边界值，才能获得窗口需要的左边界值；上边界值也是同理的方法获得
4.  插件的编写方法：`$.fn.myplugin = function（）｛//mycode｝`.方法中的this表示的是执行这个方法的jQuery对象，注意方法应该是最后`return this`，以保证其他jQuery方法可以级联操作
5.  `instanceof`可以用于判断一个变量是不是一个某个js类的实例，比如判断是不是一个Object，用法`obj instanceof Object`
6.  `typeof`可以用于判断一个变量的数据类型，比如`typeof str == "string"`
7.  `height()`和`width()`方法获得是元素本身的高和宽，`innerHeight( )`和`innerWidth( )`获得是包括了padding的高和宽，`outerHeight（）`和`outerWidth（）`获得是包括了border和padding的高和宽，`outerHeight（true）`和`outerWidth（true）`获得是包括`margin`、`border`和`padding`的高和宽
8.  `scroll`可以用于注册浏览器或某一个节点的滚动条滚动所需要执行的操作
9.  `resize`可以用于注册浏览器大小改变时所需要执行的操作
10. jQuery提供的时间操作是注册的时候是增量的，比如说我有两段代码都是`$(window).scroll(function(){})`,第二段的function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行
11. `animate`方法可以对left，top值进行一定时间内的变化，达到动画的效果
12. `dequeue`方法可以从动画队列的开头移除一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行
13. is方法可以用来判断一个对象是否满足is方法参数中的jQuery选择器
14. `:visible`选择器可以用于获取页面中的可见元素
15. 浏览器间的差异导致在`document.ready`中的代码获得浏览器可视区域宽高以及滚动条left，top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值
16. `$.browser`可以用于判断浏览器的类型，判断的方法可以是`$.browser.msie == true`，还可以使用的值包括`$.browser.opera` 、 `$.browser.safari` 、 `$.browser.mozilla`
17. `$.browser.version`可以判断浏览器的版本号，例如`$.browser.version.indexOf("8")`

# end #

谢谢您的阅读！

[70]: /images/20210923/f9d9a906d563445da3a3f857f4bfd55a.png