|
锁定老帖子 主题：徐徐升起并淡淡消失的提示窗口
精华帖 (0) :: 良好帖 (0) :: 新手帖 (3) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-07-15
最后修改：2010-07-16
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>mymenu</title> <link type="text/css" rel="stylesheet" href="menu.css" /> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript" src="menu.js"></script> </head> <body style="overflow:hidden"> <div id="right" class="window"> <div class="title"> <img src="images/close.gif" alt="关闭" /> 温馨提示！ </div> <div class="context"> 欢迎光临烟灰网（www.yanhui.com）!! </div> </div> </body> </html>
jQuery(document).ready(function(){
var rightwin=jQuery("#right");
var windowobj=jQuery(window);
var cwinWidth=rightwin.width();
var cwinHeight=rightwin.height();
var browserWidth=windowobj.width();
var browserHeight=windowobj.height();
var scrollLeft=windowobj.scrollLeft();
var scrollTop=windowobj.scrollTop();
rightwin.mywin({left:"right",top:"bottom"},
function(){
rightwin.hide(1000);
},{left:browserWidth-cwinWidth-5,top:browserHeight}
).fadeOut(30000).dequeue();
});
/* name:mywin插件
* 参数position：窗口显示的最终位置{left：XX，top：XX}
* 参数hidefunc：关闭时调用的函数
* 参数initPos： 窗口初位置{left：XX，top：XX}
*/
jQuery.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=this.outerWidth(true);
var cwinHeight=this.outerHeight(true);
var browserWidth; //浏览器宽度
var browserHeight; //浏览器高度
var scrollLeft; //
var scrollTop; //
//计算浏览器可视区域位置
function getWinDin(){
browserWidth=windowobj.width();
browserHeight=windowobj.height();
scrollLeft=windowobj.scrollLeft();
scrollTop=windowobj.scrollTop();
}
//计算浏览器的左边距
function callLeft(positionleft,browserWidth,scrollLeft,cwinWidth){
if(positionleft && typeof positionleft=="string"){
if(positionleft=="center"){
left=(browserWidth-cwinWidth)/2;
}
else if(positionleft=="left"){
left=0;
}
else if(positionleft=="right"){
left=browserWidth-cwinWidth;
}
}
else if(positionleft && typeof positionleft=="number"){
top=positionleft;
}else{
left=(browserWidth-cwinWidth)/2;
}
}
//计算浏览器的上边距
function callTop(positiontop,browserHeight,scrollTop,cwinHeight){
if(positiontop && typeof positiontop=="string"){
if(positiontop=="center"){
top=(browserHeight-cwinHeight)/2;
}
else if(positiontop=="top"){
top=0
}
else if(positiontop=="bottom"){
top=browserHeight-cwinHeight;
}
}
else if(positiontop && typeof positiontop=="number"){
top=positiontop;
}else{
top=(browserHeight-cwinHeight)/2;
}
}
//移动窗口的位置
function movewin(){
callLeft(currentwin.data("positionleft"),browserWidth,scrollLeft,cwinWidth);
callTop(currentwin.data("positiontop"),browserHeight,scrollTop,cwinHeight);
currentwin.animate({
left:left-5,
top: top
},2000);
}
//拖动窗口滚动条后重新调整窗口的相对位置
var scrolltimeout;
$(window).scroll(function(){
if(!currentwin.is(":visible")){
return;
}
clearTimeout(scrolltimeout);
scrolltimeout=setTimeout(function(){
getWinDin();
movewin();
},2000);
});
//浏览器窗口太小变化时重新调整窗口的相对位置
$(window).resize(function(){
if(!currentwin.is(":visible")){
return;
}
getWinDin();
movewin();
});
//点击关闭图标关闭窗口时间
currentwin.children(".title").children("img").click(
function(){
if(!hidefunc){
currentwin.hide(1000);
}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();
}
currentwin.data("positionleft",positionleft);
currentwin.data("positiontop",positiontop);
getWinDin();
movewin();
return currentwin;
}
}
css文件：
.window{
background-color:#D0DEF0;
width:251px;
pending:2px;
margin:2px;
position:absolute;
display:none;
}
.title{
font-size:10pt;
height:10px;
width:250px;
pending:2px;
}
.title img{
float:right;
cursor:pointer;
}
.context{
background-color:white;
height:200px;
width:250px;
border:2px solid #D0DEF0;
overflow:auto;
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-07-16
火狐上好像关闭按钮不能用啊？
|
| 返回顶楼 | |
|
发表时间：2010-07-16
myzhijie 写道 火狐上好像关闭按钮不能用啊？ 火狐上关闭按钮可以用啊，我试过？ |
| 返回顶楼 | |
|
发表时间：2010-07-16
火狐上关闭按钮确实不能用啊
|
| 返回顶楼 | |
|
发表时间：2010-07-16
搜狗浏览器也不能关闭
|
| 返回顶楼 | |
|
发表时间：2010-07-16
hahalzb 写道 火狐上关闭按钮确实不能用啊
真不好意思，各位！ 本人上传上传上去的两个文件，第二个是稍加修整的！第二个（44.3 KB）修改过的是可以关闭窗口的！ 由于本人的疏忽没有标明....实在抱歉！ |
| 返回顶楼 | |
|
发表时间：2010-07-16
另外，本人这几天也在“研究”jQuery下的树形视图（viewtree）的插件，特别是jstree+checkbox插件的值的获取和回显问题！
哎！小弟愚钝，至今还没有所突破！在网络上找到的，似乎都是外观上的一些东西！ 不知给为是否有好的提示和建议！ 小弟，讨教讨教！ |
| 返回顶楼 | |
|
发表时间：2010-07-16
有一个JQuery插件不错，实现类似功能，JGrowl
|
| 返回顶楼 | |
|
发表时间：2010-07-17
小玩意 入门的
|
| 返回顶楼 | |
|
发表时间：2010-07-17
能不能做个 最小化网页了 那个提示 还在哪里。就是不让在页面里面 的
|
| 返回顶楼 | |
