首页 > 语言 > JavaScript > 正文

Jquery实现顶部弹出框特效

2024-05-06 16:24:26
字体:
来源:转载
供稿:网友

本文给大家分享的是jquery顶部浮动弹出层,点击浮动层动画弹出层,弹出层从顶部动画滑动效果,效果非常不错,推荐给大家。

Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示。

Html代码

 

 
  1. <div class="tooltiptop"
  2. <div class="bg"></div> 
  3. <div class="main"><i>Jq顶部弹出框</i><span onClick="ToolTipTop.Hide();" title="关闭">X</span></div> 
  4. </div> 

Css代码

 

 
  1. body { 
  2. margin0
  3. padding0
  4. .tooltiptop { 
  5. width100%
  6. height50px
  7. margin-top:-50px
  8. display:none
  9. .tooltiptop .bg { 
  10. width100%
  11. background-color#333
  12. height50px
  13. opacity: .7
  14. positionabsolute
  15. margin0
  16. .tooltiptop .main { 
  17. width100%
  18. positionabsolute
  19. margin0
  20. height50px
  21. line-height50px
  22. text-aligncenter
  23. color#fff
  24. .tooltiptop .main span { 
  25. floatright
  26. color#fff
  27. margin-right20px
  28. cursorpointer

Jq代码

 

 
  1. var ToolTipTop={ 
  2. Show:function(Msg){ 
  3. $(".tooltiptop .main i").html(Msg); 
  4. $(".tooltiptop").css("display","block").animate({marginTop:"0px"},500); 
  5. }, 
  6. Hide:function(){ 
  7. $(".tooltiptop").animate({marginTop:"-50px"},500,function(){$(this).css("display","none")}); 

再给大家分享一例特效,效果也非常不错

CSS

 

 
  1. <style type="text/css"
  2. *{margin:0;padding:0;list-style-type:none;} 
  3. a,img{border:0;} 
  4. .demo{margin:0 auto 0 auto;padding:200px 0 0 0;width:400px;text-align:center;font-size:18px;} 
  5. .demo .action{color:#3366cc;text-decoration:none;font-family:"微软雅黑","宋体";} 
  6.  
  7. #Header
  8. position:fixed;z-index:9999999;top:0;right:0;left:0;height:38px;border-bottom:1px solid #e0dede;width:100%
  9. background-color:#F7F7F7
  10. background-image:linear-gradient(#fff#f7f6f5); 
  11. background-image:-moz-linear-gradient(#fff#f7f6f5); 
  12. background-image:-o-linear-gradient(#fff#f7f6f5); 
  13. background-image:-webkit-linear-gradient(#fff#f7f6f5); 
  14.  
  15. box-shadow:inset 0 1px #fff0 1px 3px rgba(34,25,25,0.4); 
  16. -moz-box-shadow:inset 0 1px #fff0 1px 2px rgba(34,25,25,0.4); 
  17. -webkit-box-shadow:inset 0 1px #fff0 1px 3px rgba(34,25,25,0.4); 
  18. *html,*html body{background-image:url(about:blank);background-attachment:fixed;} 
  19. *html #Header{position:absolute;top:expression(eval(document.documentElement.scrollTop));} 
  20.  
  21. .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;background:#f6f4f5;display:none;} 
  22. *html,*html body{background-image:url(about:blank);background-attachment:fixed;} 
  23. *html .destroy,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));} 
  24.  
  25. .destroy{position:fixed;top:0px;left:50%;margin-left:-425px;*margin-left:-718px;_margin-left:-425px;margin-top:-292px;z-index:99996;opacity:0;filter:alpha(opacity=0);} 
  26. .sheet{position:relative;width:840px;height:290px;margin:auto;padding:0;background:#fff9e2 url("images/tips_bg.gif"); 
  27. box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3); 
  28. -moz-box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3); 
  29. -webkit-box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3); 
  30.  
  31. border-bottom:2px solid #efebda
  32. border-bottom-left-radius:5px
  33. border-bottom-right-radius:5px
  34. -moz-border-bottom-left-radius:5px
  35. -moz-border-bottom-right-radius:5px
  36. -webkit-border-bottom-left-radius:5px
  37. -webkit-border-bottom-right-radius:5px
  38. .sheet a.close{display:block;position:absolute;width:20px;height:20px;right:5px;top:5px;background:url("images/sheet_close.gif"no-repeat;} 
  39. .sheet a:hover.close{background-position:0 -30px;} 
  40. .sheet a:active.close{background-position:0 -60px;} 
  41. .sheet .head{padding:20px 15px;border-bottom:1px solid #f6f4ee;} 
  42. .sheet .head h2{padding:0;font-size:18px;font-weight:400;color:#444;text-align:center;} 
  43. .sheet .body{padding:10px 15px;border-top:1px solid #fff;} 
  44. </style> 

JS

 

 
  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  2. <script type="text/javascript"
  3. $(document).ready(function(){ 
  4.  
  5. var h = $(document).height(); 
  6. $(".overlay").css({"height": h });  
  7.  
  8. $(".action").click(function(){ 
  9.  
  10. $(".overlay").css({'display':'block'}).animate({'opacity':'0.8'}); 
  11.  
  12. $(".destroy").stop(true).animate({'margin-top':'40px','opacity':'1'},400); 
  13.  
  14. }); 
  15.  
  16. $(".close").click(function(){ 
  17.  
  18. $(".destroy").stop(true).animate({'margin-top':'-292px','opacity':'0'},800); 
  19.  
  20. $(".overlay").css({'display':'none'}).animate({'opacity':'0'}); 
  21.  
  22. }); 
  23.  
  24. }); 
  25. </script> 

HTML

 

 
  1. <div id="Header"></div> 
  2.  
  3. <div class="demo"><a class="action" href="javascript:void(0);">jquery float浮动层弹出层页面加载特效</a></div> 
  4.  
  5. <div class="overlay"></div> 
  6.  
  7. <div class="destroy"
  8. <div class="sheet"
  9. <div class="head"
  10. <h2>jquery顶部动画弹出层</h2> 
  11. </div> 
  12. <div class="body"></div> 
  13. <a class="close" title="关闭" href="#"></a> 
  14. </div> 
  15. </div><!--sheet end--> 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选