jquey实战-窗口效果

最新推荐文章于 2024-08-27 15:59:21 发布

iteye_10019

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量132

点赞数

分类专栏： js 文章标签：窗口效果 jquery javascript js html ViewUI

本文链接：https://blog.csdn.net/iteye_10019/article/details/82271045

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

3. 窗口效果
window.html

<html>
<head>
<title>窗口效果</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>
<input type="button" value="左下角显示窗口" id="leftpop" />
<input type="button" value="屏幕中间显示窗口" id="centerpop" />
<div class="window">
    <div class="title" id="center">
        <img alt="关闭" src="images/close.gif" />
        我是中间显示窗口的标题栏
</div>
    <div class="content">
        我是中间显示窗口的内容区
</div>
</div>
<div class="window" id="left">
    <div class="title">       
<img alt="关闭" src="image/close.gif" />
        我是左边显示窗口的标题栏
</div>
    <div class="content">
        我是左边显示窗口的内容区
</div>
</div>
<div class="window" id="right">
    <div class="title">
<img alt="关闭" src="image/close.gif" />
        我是右边显示窗口的标题栏
</div>
    <div class="content">
        我是右边显示窗口的内容区
</div>
</div>
</body>
</html>

window.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: 16px;
height: 16px;
float: right;
cursor: pointer;
}

window.js

$(document).ready(function() {
//1. 点击按钮可以在屏幕中间显示一个窗口

//2. 点击按钮2可以在屏幕的左下角显示一个窗口
var contentwin = $("#center").mywin({left: "center", top: "center"});
var leftwin = $("#left").mywin({left: "left", top: "bottom"}, function() {
    leftwin.slideUp("slow");
} );
$("#contentpop").click(function(){
    //鼠标点击按钮之后，把id为center的窗口显示在页面中间
    //计算位于屏幕中间的窗口的左边界和上边界的值
    // 浏览器可视区域的宽和高，当前窗口的宽和高

    contentwin.show("slow");
});
$("#leftpop").click(function() {
    leftwin.slideDown("slow");
}
});

//position包含两个属性，一个是left，一个是top
//hidefunc表示执行窗口隐藏的方法
$.fn.mywin = function(position, hidefunc) {
if(position && position instanceof Object) {
    var positionleft = position.left;
    var positiontop = position.top;
var windowobj = $(window);
var browserwidth = $(window).width();
    var browserheight = $(window).height();
    var scrollLeft = $(window).scrollLeft();
    var scrollTop = $(windwo).scrollTop();
var currentwin = this;
var cwinwidth = currentwin.outerWidth(true);
var cwinheight = currentwin.outerHeight(true);
var left;
var top;
    
    function calLeft(positionleft,scrollLeft,browsewidth,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;
        }else {
            left = scrollLeft + (browserwidth – cwinwidth) /2;
        }
    }else if(positionleft && typeof positionleft == "number" ) {
        left = positionleft;
    }else {
        left = 0;
    }
    currentwin.data("positionleft",positionleft);
    }
calLeft(positionleft,scrollLeft,browsewidth,cwinwidth)

function calTop(positiontop,scrollTop,browseheight,cwinwidthheight) {
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 + browseheight – cwinheight;
        }else {
top =scrollTop +  (browserheight – cwinheight) / 2;
        }
    } else if(positionleft && typeof positiontop == "number" ) {
        top = positionleft;
    }else {
        top = 0;
    }
    currentwin.data("positiontop",positiontop);
    }
    calTop(positiontop,scrollTop,browseheight,cwinwidthheight);

    var scrollTimeout;
    $(window).scroll(function() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(function() { //延时处理
var browserwidth = $(window).width();
            var browserheight = $(window).height();
            var scrollLeft = $(window).scrollLeft();
            var scrollTop = $(windwo).scrollTop();
            calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);
            calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);
            currentwin.animate({
                left: left,
                top: top;
},300);
        },300);
});

$(window).resize(function(){
var browserwidth = $(window).width();
        var browserheight = $(window).height();
        var scrollLeft = $(window).scrollLeft();
        var scrollTop = $(windwo).scrollTop();
        calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);
        calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);
        currentwin.animate({
                left: left,
                top: top;
},300);
});

currentwin.css("left",left).css("top",top);
currentwin.children(".title").children("img").click(function(){
    if(!hidefunc) {
        currentwin.hide("slow");
    }else {
        hidefunc();
    }
});

return currentwin; //返回当前对象，以便可以级联的执行其他方法
}
}

知识宝典
1. 页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示
2. 让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口一定的padding值(或者是内容区域设置边框)，以达到内容区域和标题栏以后窗口外边的对比，从而看起来是窗口的效果
3. 正确理解float的效果，实际上会影响到后面的一个元素和float的元素之间的显示效果
4. overflow属性值为auto时，当内容区域很多超过了定义的高度或宽度时，就会显示滚动条
5. position属性值为absolute是，元素将在页面中绝对定位。如果祖先节点中有position:relative的定义，则相对于这个祖先节点的左上角进行定位
6. 浏览器可视区域的宽和高可以通过$(window).width() 和$(window).height()的方式获得
7. 浏览器滚动条的左边界和上边界可以通过$(window).scrollLeft()和$(window).scrollTop()来获得
8. 窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除2，在加上滚动条的左边界值，才能获得窗口需要的左边界值；上边界值也是同理的方法获得。
9. 插件的编写方法：$.fn.muplugin = function(){}, 方法中的this表示的是执行这个方法的jquery对象，注意方法应该在最后return this, 一保证其他jquery方法可以级联操作
10. instanceof可以用于判断一个变量是不是某个Js类的实例，比如判断是不是一个Object, 用法obj instanceof Obj
11. typeof可以用于判断一个变量的数据类型，比如typeof str == “string”
12. height()和width()方法获得的是元素本身的高和宽，innerHeight()和innerWidth()获得的是包括了padding的高和宽，outerHeight()和outerWidth()获得是包括了border和padding的高和宽，outerHeight(true)和outerWidth(true)获得是包括margin,border和padding的高和宽
13. scroll可以用于注册浏览器或某一节点的滚动条滚动所需要执行的操作
14. resize可以用于注册浏览器大小改变时所需要执行的操作
15. jquery提供的事件操作在注册的时候是增量的，比如有两段代码都是$(window).scroll(function(){}),第二段的function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行
16. animate方法可以对left,top值进行一定时间内的变化，达到动画效果
17. dequene方法可以从动画队列的开头移除一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行。
18. is方法可以用来判断一个对象是否满足is方法参数中jquery选择器
19. :visible选择器可以用于获取页面中的可见元素
20. 浏览器间的差异导致在document.ready中的代码获得浏览器可视区域宽高已经滚动条left,top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值。
21. $.browser可以用于判断浏览器的类型，判断方法可以是$.browser.msie == true, 可以使用的是包括$.browser.opera、$.browser.safari、$.browser.mozilla
22. $.browser.version可以判断浏览器的版本号，例如$.browser.version.indexOf(“8”)

iteye_10019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquey实战-窗口效果

3. 窗口效果window.html&lt;html&gt;&lt;head&gt;&lt;title&gt;窗口效果&lt;/title&gt;&lt;meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”&gt;&lt;link type=”text/css” rel=”stylesheet” hre...
复制链接

扫一扫

专栏目录