提示信息的窗口效果
代码
<!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>
<title>提示信息的窗口效果</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
.css_window
{
background-color: #D0DEF0;
width: 250px;
padding: 2px;
margin: 5px;
position: absolute;
display: none;
}
.css_window_title
{
padding: 2px;
font-size: 14px;
}
.css_window_title span
{
float: right;
font-size: 12px;
color: blue;
cursor: pointer;
}
.css_window_content
{
height: 150px;
background-color: White;
font-size: 13px;
overflow: auto;
}
</style>
<script type="text/javascript">
/*
@param position 窗口最终位置，包含left和top属性
@param hidefunc 执行窗口隐藏的方法
@param initPosition 窗口初始化位置，包含left和top属性
*/
$.fn.show_window = function(position, hidefunc, initPosition) {
//当前窗口
var cwin = this;
//当前窗口的宽和高
//outerXXX()参数为true时包含padding,margin……的值
var cwind_width = this.outerWidth(true);
var cwind_height = this.outerHeight(true);
//最终确定的left和top
var left;
var top;
//用于判断输入的值
var p_left = position.left;
var p_top = position.top;
//游览器窗口的宽和高，滚动条的左边界值和上边界值
var browser_width;
var browser_height;
var scroll_left;
var scroll_top;
//获取游览器窗口的宽和高，滚动条的左边界值和上边界值
function getBrowserDim() {
browser_width = $(window).width();
browser_height = $(window).height();
scroll_left = $(window).scrollLeft();
scroll_top = $(window).scrollTop();
}
function setleft(p_left, scroll_left, browser_width, cwind_width) {
//设置left
if (p_left && typeof p_left == "string") {
if (p_left == "center") left = scroll_left + (browser_width - cwind_width) / 2;
else if (p_left == "left") left = scroll_left;
else if (p_left == "right") left = scroll_left + browser_width - cwind_width;
else left = scroll_left + browser_width - cwind_width;
}
else if (p_left && typeof p_left == "number") {
left = p_left;
}
else {
left = 0;
}
}
function settop(p_top, scroll_top, browser_height, cwind_height) {
//设置top
if (p_top && typeof p_top == "string") {
if (p_top == "center") top = scroll_top + (browser_height - cwind_height) / 2;
else if (p_top == "top") top = scroll_top;
else if (p_top == "bottom") top = scroll_top + browser_height - cwind_height;
else top = scroll_top + browser_height - cwind_height;
}
else if (p_top && typeof p_top == "number") {
top = p_top;
}
else {
top = 0;
}
}
//移动窗口
function moveWin() {
setleft(p_left, scroll_left, browser_width, cwind_width);
settop(p_top, scroll_top, browser_height, cwind_height);
//cwin.css("left", left).css("top", top);
//使用动画的方式改变left和top
cwin.animate({ left: left, top: top }, 600);
}
//关闭
cwin.children(".css_window_title").children("span").click(function() {
if (!hidefunc) cwin.hide("slow");
else hidefunc();
});
//窗口初始位置
if (initPosition && initPosition instanceof Object) {
var init_left = initPosition.left;
var init_top = initPosition.top;
if (init_left && typeof init_left == "number")
cwin.css("left", init_left);
else
cwin.css("left", 0);
if (init_top && typeof init_top == "number")
cwin.css("top", init_top);
else
cwin.css("top", 0);
cwin.show();
}
//初始化页面
cwin.data("p_left", p_left); //保存p_left;
cwin.data("p_top", p_top); //保存p_top;
getBrowserDim();
moveWin();
//注册滚动条的滚动事件
var scrollTimeout;
$(window).scroll(function() {
//判断当前窗口是否可见
if (!cwin.is(":visible"))
return;
//延时300毫秒防止闪烁
clearTimeout(scrollTimeout);
setTimeout(function() {
getBrowserDim();
moveWin();
}, 300);
});
//注册游览器大小改变的事件
$(window).resize(function() {
getBrowserDim();
moveWin();
});
return cwin;
}
$(function() {
setTimeout(function() {
//窗口（中间)
$("#css_window_center")
.show_window({ left: "center", top: "center" })
.show("slow");
//窗口（左下)
var lb = $("#css_window_leftbottom").show_window({ left: "left", top: "bottom" }, function() {
lb.slideUp("slow");
});
lb.show("slow");
//窗口（右下)
var browser_width = $(window).width();
var browser_height = $(window).height();
var scroll_left = $(window).scrollLeft();
var scroll_top = $(window).scrollTop();
var cwind_width = $("#css_window_rightbottom").outerWidth(true);
var cwind_height = $("#css_window_rightbottom").outerHeight(true);
var rb = $("#css_window_rightbottom").show_window(
{ left: "right", top: "bottom" }, function() { rb.hide(); },
{
left: scroll_left + browser_width - cwind_width,
top: scroll_top + browser_height
})
.fadeOut(15000).dequeue();
rb.show("slow");
}, 500);
});
</script>
</head>
<body>
<div id="css_window_center" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（中间）
</div>
<div class="css_window_content">
提示信息的窗口（中间） 内容
</div>
</div>
<div id="css_window_leftbottom" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（左下）
</div>
<div class="css_window_content">
提示信息的窗口（左下） 内容
</div>
</div>
<div id="css_window_rightbottom" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（右下）
</div>
<div class="css_window_content">
提示信息的窗口（右下） 内容
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>提示信息的窗口效果</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
.css_window
{
background-color: #D0DEF0;
width: 250px;
padding: 2px;
margin: 5px;
position: absolute;
display: none;
}
.css_window_title
{
padding: 2px;
font-size: 14px;
}
.css_window_title span
{
float: right;
font-size: 12px;
color: blue;
cursor: pointer;
}
.css_window_content
{
height: 150px;
background-color: White;
font-size: 13px;
overflow: auto;
}
</style>
<script type="text/javascript">
/*
@param position 窗口最终位置，包含left和top属性
@param hidefunc 执行窗口隐藏的方法
@param initPosition 窗口初始化位置，包含left和top属性
*/
$.fn.show_window = function(position, hidefunc, initPosition) {
//当前窗口
var cwin = this;
//当前窗口的宽和高
//outerXXX()参数为true时包含padding,margin……的值
var cwind_width = this.outerWidth(true);
var cwind_height = this.outerHeight(true);
//最终确定的left和top
var left;
var top;
//用于判断输入的值
var p_left = position.left;
var p_top = position.top;
//游览器窗口的宽和高，滚动条的左边界值和上边界值
var browser_width;
var browser_height;
var scroll_left;
var scroll_top;
//获取游览器窗口的宽和高，滚动条的左边界值和上边界值
function getBrowserDim() {
browser_width = $(window).width();
browser_height = $(window).height();
scroll_left = $(window).scrollLeft();
scroll_top = $(window).scrollTop();
}
function setleft(p_left, scroll_left, browser_width, cwind_width) {
//设置left
if (p_left && typeof p_left == "string") {
if (p_left == "center") left = scroll_left + (browser_width - cwind_width) / 2;
else if (p_left == "left") left = scroll_left;
else if (p_left == "right") left = scroll_left + browser_width - cwind_width;
else left = scroll_left + browser_width - cwind_width;
}
else if (p_left && typeof p_left == "number") {
left = p_left;
}
else {
left = 0;
}
}
function settop(p_top, scroll_top, browser_height, cwind_height) {
//设置top
if (p_top && typeof p_top == "string") {
if (p_top == "center") top = scroll_top + (browser_height - cwind_height) / 2;
else if (p_top == "top") top = scroll_top;
else if (p_top == "bottom") top = scroll_top + browser_height - cwind_height;
else top = scroll_top + browser_height - cwind_height;
}
else if (p_top && typeof p_top == "number") {
top = p_top;
}
else {
top = 0;
}
}
//移动窗口
function moveWin() {
setleft(p_left, scroll_left, browser_width, cwind_width);
settop(p_top, scroll_top, browser_height, cwind_height);
//cwin.css("left", left).css("top", top);
//使用动画的方式改变left和top
cwin.animate({ left: left, top: top }, 600);
}
//关闭
cwin.children(".css_window_title").children("span").click(function() {
if (!hidefunc) cwin.hide("slow");
else hidefunc();
});
//窗口初始位置
if (initPosition && initPosition instanceof Object) {
var init_left = initPosition.left;
var init_top = initPosition.top;
if (init_left && typeof init_left == "number")
cwin.css("left", init_left);
else
cwin.css("left", 0);
if (init_top && typeof init_top == "number")
cwin.css("top", init_top);
else
cwin.css("top", 0);
cwin.show();
}
//初始化页面
cwin.data("p_left", p_left); //保存p_left;
cwin.data("p_top", p_top); //保存p_top;
getBrowserDim();
moveWin();
//注册滚动条的滚动事件
var scrollTimeout;
$(window).scroll(function() {
//判断当前窗口是否可见
if (!cwin.is(":visible"))
return;
//延时300毫秒防止闪烁
clearTimeout(scrollTimeout);
setTimeout(function() {
getBrowserDim();
moveWin();
}, 300);
});
//注册游览器大小改变的事件
$(window).resize(function() {
getBrowserDim();
moveWin();
});
return cwin;
}
$(function() {
setTimeout(function() {
//窗口（中间)
$("#css_window_center")
.show_window({ left: "center", top: "center" })
.show("slow");
//窗口（左下)
var lb = $("#css_window_leftbottom").show_window({ left: "left", top: "bottom" }, function() {
lb.slideUp("slow");
});
lb.show("slow");
//窗口（右下)
var browser_width = $(window).width();
var browser_height = $(window).height();
var scroll_left = $(window).scrollLeft();
var scroll_top = $(window).scrollTop();
var cwind_width = $("#css_window_rightbottom").outerWidth(true);
var cwind_height = $("#css_window_rightbottom").outerHeight(true);
var rb = $("#css_window_rightbottom").show_window(
{ left: "right", top: "bottom" }, function() { rb.hide(); },
{
left: scroll_left + browser_width - cwind_width,
top: scroll_top + browser_height
})
.fadeOut(15000).dequeue();
rb.show("slow");
}, 500);
});
</script>
</head>
<body>
<div id="css_window_center" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（中间）
</div>
<div class="css_window_content">
提示信息的窗口（中间） 内容
</div>
</div>
<div id="css_window_leftbottom" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（左下）
</div>
<div class="css_window_content">
提示信息的窗口（左下） 内容
</div>
</div>
<div id="css_window_rightbottom" class="css_window">
<div class="css_window_title">
<span>关闭</span> 提示信息的窗口（右下）
</div>
<div class="css_window_content">
提示信息的窗口（右下） 内容
</div>
</div>
</body>
</html>
