设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 506|回复: 0

[实例分享] jquery实现右下角信息提示框(点击最小化/展开)

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-1-22 11:58:44 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jquery实现右下角信息提示框(点击最小化/展开)

效果演示图:
演示截图.png
Code:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Demo</title>
  6. <style>
  7. /*css*/
  8. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  9. .Message{width:370px;position:fixed;*position:absolute;right:0;bottom:0;background:#fff;border:1px solid #3e668d; border-radius:4px;}
  10. .Message img{border:none;border:0;}
  11. .Message a{color:#fff;text-decoration:none;outline:none;}
  12. .Message a:hover{color:#fff;}
  13. .Message .title{width:370px;height:30px;line-height:30px;background:#629fd7;}
  14. .Message .title .left{float:left;font-size:16px;font-weight:bold;}
  15. .Message .title .left a{display:block;float:left;height:30px;}
  16. .Message .title .left .Msg{margin-left:5px;}
  17. .Message .title .right{float:right;font-size:24px;font-weight:bold;}
  18. .Message .title .right a{display:block;width:30px;height:30px;color:#fff;}
  19. .Message .title .right a:hover{background:#3e668d;color:#fff;}
  20. .Message .iframe{padding:10px;}
  21. #AdminMsg{width:350px;height:auto;}
  22. </style>
  23. </head>
  24. <body>
  25. <div class="Message">
  26. <div class="title clearfix">
  27. <div class="left"><a class="Msg"><img src="images/Msg.png" /></a><a>待办事项</a><a href="javascript:;" title="手动检测" id="Refresh"><img src="images/Refresh.png" title="手动检测" /></a></div>
  28. <div class="right"><a href="javascript:;" title="最小化" id="open"><img src="images/Minus.png" /></a></div>
  29. </div>
  30. <div class="iframe">
  31. <iframe id="AdminMsg" name="AdminMsg" src="iframe.html" frameborder=0 scrolling=no></iframe>
  32. </div>
  33. </div>
  34. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  35. <script type="text/javascript">
  36. $(document).ready(function(){
  37. var AdminMsg=$("#AdminMsg");
  38. //点击最小化和展开
  39. $("#open").click(function(){
  40. var iframeH=AdminMsg.height();
  41. if(iframeH>20){
  42. $(this).html('<img src="adminstyle/1/images/plus.png" />');
  43. $(this).attr({title:"展开"});
  44. AdminMsg.css("height",20);
  45. }else if(iframeH<=20){
  46. $(this).html('<img src="adminstyle/1/images/Minus.png" />');
  47. $(this).attr({title:"最小化"});
  48. AdminMsg.css("height","auto");
  49. };
  50. });
  51. //手动检测
  52. $("#Refresh").click(function(){
  53. $(AdminMsg).attr('src', $(AdminMsg).attr('src'));
  54. });
  55. });
  56. </script>
  57. </body>
  58. </html>
复制代码

素材img(因为素材是透明白色图片,另存为PNG24格式即可):
Msg.png
Msg.png
Refresh.png
Refresh.png
Minus.png
Minus.png
plus.png
Plus.png



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表