當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

提示信息的窗口效果

發布時間：2023/12/10 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了提示信息的窗口效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼 <!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>

轉載于:https://www.cnblogs.com/xyjblog/archive/2010/02/18/1669244.html

總結

以上是生活随笔為你收集整理的提示信息的窗口效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：豆瓣电影推荐系统（Ⅰ）ItemCF算法原
下一篇：程序员---我的读书列表