开发者的天空

注册

找回密码

 

 

搜索
开发者的天空 › 论坛 › web前端技术 › 动画效果的提示窗口显示和关闭
查看: 1760|回复: 6
 go

[JQuery] 动画效果的提示窗口显示和关闭    

afrag

Rank: 75Rank: 75Rank: 75
发表于 2010-7-16 16:37 |显示全部帖子
在很多网站中，都可以看到动画效果的提示窗口。正好现在在学习JQuery，于是用JQuery做了一个这样的动画效果。
下面的例子中，我们会在窗口的右下角显示一个提示窗口。当打开主窗口的时候，该提示窗口会从页面右下角慢慢升起。当关闭该提示窗口的时候，窗口会从右到左慢慢消失。
具体的实现是用Div来实现的。废话不多说了，代码为王哈！
主页面代码：
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>mymenu</title>
  5. <link type="text/css" rel="stylesheet" href="menu.css" />
  6. <script type="text/javascript" src="jquery-1.4.min.js"></script>
  7. <script type="text/javascript" src="menu.js"></script>
  8. </head>
  9. <body style="overflow:hidden">
  10.         <div id="right" class="window">
  11.                 <div class="title">
  12.                         <img src="images/close.gif" alt="关闭" />
  13.                         温馨提示！
  14.                 </div>
  15.                 <div class="context">
  16.                         欢迎光临<a href="http://www.developersky.net">开发者的天空</a>!
  17.                 </div>
  18.         </div>
  19. &nbsp;
  20. </body>
  21. </html>
复制代码
JavaScript代码
  1. jQuery(document).ready(function(){                                  
  2.         var rightwin=jQuery("#right");
  3.         var windowobj=jQuery(window);
  4.         var cwinWidth=rightwin.width();
  5.         var cwinHeight=rightwin.height();
  6.         var browserWidth=windowobj.width();
  7.         var browserHeight=windowobj.height();
  8.         var scrollLeft=windowobj.scrollLeft();
  9.         var scrollTop=windowobj.scrollTop();
  10.         rightwin.mywin({left:"right",top:"bottom"},
  11.                 function(){
  12.                                 rightwin.hide(1000);                                                                                                  
  13.                 },{left:browserWidth-cwinWidth-5,top:browserHeight}
  14.         ).fadeOut(30000).dequeue();
  15. });


  18. /* name:mywin插件
  19. * 参数position：窗口显示的最终位置{left：XX，top：XX}
  20. * 参数hidefunc：关闭时调用的函数
  21. * 参数initPos： 窗口初位置{left：XX，top：XX}
  22. */
  23. jQuery.fn.mywin=function(position,hidefunc,initPos){
  24.         if(position && position instanceof Object){
  25.                 var positionleft=position.left;
  26.                 var positiontop=position.top;
  27.                
  28.                 var left;
  29.                 var top;
  30.                 var windowobj=$(window);
  31.                 var currentwin=this;
  32.                 var cwinWidth=this.outerWidth(true);
  33.                 var cwinHeight=this.outerHeight(true);       
  34.                
  35.                 var browserWidth;                        //浏览器宽度
  36.                 var browserHeight;                       //浏览器高度
  37.                 var scrollLeft;                          //
  38.                 var scrollTop;                           //
  39.                                        
  40.                 //计算浏览器可视区域位置
  41.                 function getWinDin(){
  42.                         browserWidth=windowobj.width();
  43.                         browserHeight=windowobj.height();
  44.                         scrollLeft=windowobj.scrollLeft();
  45.                         scrollTop=windowobj.scrollTop();
  46.                 }
  47.                 //计算浏览器的左边距
  48.                 function callLeft(positionleft,browserWidth,scrollLeft,cwinWidth){
  49.                         if(positionleft && typeof positionleft=="string"){
  50.                                 if(positionleft=="center"){
  51.                                         left=(browserWidth-cwinWidth)/2;
  52.                                 }
  53.                                 else if(positionleft=="left"){
  54.                                         left=0;
  55.                                 }
  56.                                 else if(positionleft=="right"){
  57.                                         left=browserWidth-cwinWidth;
  58.                                 }
  59.                         }
  60.                         else if(positionleft && typeof positionleft=="number"){
  61.                                 top=positionleft;
  62.                         }else{
  63.                                 left=(browserWidth-cwinWidth)/2;
  64.                         }
  65.                 }
  66.                
  67.                 //计算浏览器的上边距
  68.                 function callTop(positiontop,browserHeight,scrollTop,cwinHeight){
  69.                         if(positiontop && typeof positiontop=="string"){
  70.                                 if(positiontop=="center"){
  71.                                         top=(browserHeight-cwinHeight)/2;
  72.                                 }
  73.                                 else if(positiontop=="top"){
  74.                                         top=0
  75.                                 }
  76.                                 else if(positiontop=="bottom"){
  77.                                         top=browserHeight-cwinHeight;
  78.                                 }
  79.                         }
  80.                         else if(positiontop && typeof positiontop=="number"){
  81.                                 top=positiontop;
  82.                         }else{
  83.                                 top=(browserHeight-cwinHeight)/2;
  84.                         }
  85.                 }
  86.                 //移动窗口的位置
  87.                 function movewin(){
  88.                         callLeft(currentwin.data("positionleft"),browserWidth,scrollLeft,cwinWidth);
  89.                         callTop(currentwin.data("positiontop"),browserHeight,scrollTop,cwinHeight);       
  90.                         currentwin.animate({
  91.                                                                    left:left-5,
  92.                                                                 top: top
  93.                                                            },2000);
  94.                 }
  95.                
  96.                 //拖动窗口滚动条后重新调整窗口的相对位置
  97.                 var scrolltimeout;
  98.                 $(window).scroll(function(){
  99.                         if(!currentwin.is(":visible")){
  100.                                 return;
  101.                         }
  102.                         clearTimeout(scrolltimeout);
  103.                         scrolltimeout=setTimeout(function(){
  104.                                 getWinDin();       
  105.                                 movewin();       
  106.                         },2000);
  107.                 });
  108.                 //浏览器窗口太小变化时重新调整窗口的相对位置
  109.                 $(window).resize(function(){
  110.                         if(!currentwin.is(":visible")){
  111.                                 return;
  112.                         }
  113.                         getWinDin();
  114.                         movewin();
  115.                 });
  116.                 //点击关闭图标关闭窗口时间
  117.                 currentwin.children(".title").children("img").click(
  118.                         function(){
  119.                                 if(!hidefunc){
  120.                                         currentwin.hide(1000);
  121.                                 }else{
  122.                                         hidefunc();
  123.                                 }
  124.                 });
  125.                 //初始化窗口的位置
  126.                 if(initPos && initPos instanceof Object){
  127.                         var initleft=initPos.left;
  128.                         var inittop=initPos.top;
  129.                         if(initleft && typeof initleft=="number"){
  130.                                 currentwin.css("left",initleft);
  131.                         }else{
  132.                                 currentwin.css("left",0);       
  133.                         }
  134.                         if(inittop && typeof inittop=="number"){
  135.                                 currentwin.css("top",inittop);
  136.                         }else{
  137.                                 currentwin.css("top",0);       
  138.                         }
  139.                         currentwin.show();
  140.                 }
  141.                
  142.                 currentwin.data("positionleft",positionleft);
  143.                 currentwin.data("positiontop",positiontop);
  144.                 getWinDin();
  145.                 movewin();
  146.                 return currentwin;       
  147.         }
  148. }
复制代码
CSS代码
  1. .window{
  2. background-color:#D0DEF0;
  3. width:251px;
  4. pending:2px;
  5. margin:2px;
  6. position:absolute;
  7. display:none;
  8. }

  10. .title{
  11. font-size:10pt;
  12. height:10px;
  13. width:250px;
  14. pending:2px;
  15. }

  17. .title img{
  18. float:right;
  19. cursor:pointer;
  20. }

  22. .context{
  23. background-color:white;
  24. height:200px;
  25. width:250px;
  26. border:2px solid #D0DEF0;
  27. overflow:auto;
  28. }
复制代码
下面是详细的代码例子，大家可以下载然后看看实际的效果。
游客，如果你要查看本帖隐藏内容请回复
回复 引用

举报 返回顶部

ghxter

Rank: 1
发表于 2010-9-10 11:20 |显示全部帖子
感觉代码有点多，有没有更少代码的呢？我先下载试试。。。。我先下载试试。。。。我先下载试试。。。。我先下载试试。。。。我先下载试试。。。。我先下载试试。。。。
回复 引用

举报 返回顶部

tigeryulei

Rank: 1
发表于 2010-12-27 17:28 |显示全部帖子
我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。我先下载试试。。。
回复 引用

举报 返回顶部

来点难度

Rank: 3Rank: 3Rank: 3
发表于 2011-2-18 11:54 |显示全部帖子
现在赈灾学习div，真好试用一下，看看，看看看看看看看看看看看看看看看！
jsp空间
回复 引用

举报 返回顶部

蒋耶委
头像被屏蔽

禁止访问
发表于 2011-2-28 08:00 |显示全部帖子
提示: 作者被禁止或删除 内容自动屏蔽
回复 引用

举报 返回顶部

defaultAccount

Rank: 1
发表于 2011-3-9 10:46 |显示全部帖子
see see look look locationwefewfewwwefewfewfewwfewfewfewfwewfeweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
回复 引用

举报 返回顶部

defaultAccount

Rank: 1
发表于 2011-3-9 10:47 |显示全部帖子
回复 1# afrag
回复 引用

举报 返回顶部

返回列表 发新帖 回复
高级模式 | 发表帖子
B Color Image Link Quote Code Smilies
你需要登录后才可以回帖 登录 | 注册

Archiver|开发者的天空

GMT+8, 2012-2-8 19:58

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc.