Linux教程網 >> Linux編程 >> Linux編程 >> jQuery實戰-窗口效果

jQuery實戰-窗口效果

日期：2017/3/1 10:37:15 编辑：Linux編程

jQuery實戰-窗口效果:

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; //返回當前對象，以便可以級聯的執行其他方法
}
}