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

admin · 发表于 2015-1-22 11:58:44

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

您需要登录才可以下载或查看，没有账号？立即注册

x

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

效果演示图：
演示截图.png

Code：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
/*css*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.Message{width:370px;position:fixed;*position:absolute;right:0;bottom:0;background:#fff;border:1px solid #3e668d; border-radius:4px;}
.Message img{border:none;border:0;}
.Message a{color:#fff;text-decoration:none;outline:none;}
.Message a:hover{color:#fff;}
.Message .title{width:370px;height:30px;line-height:30px;background:#629fd7;}
.Message .title .left{float:left;font-size:16px;font-weight:bold;}
.Message .title .left a{display:block;float:left;height:30px;}
.Message .title .left .Msg{margin-left:5px;}
.Message .title .right{float:right;font-size:24px;font-weight:bold;}
.Message .title .right a{display:block;width:30px;height:30px;color:#fff;}
.Message .title .right a:hover{background:#3e668d;color:#fff;}
.Message .iframe{padding:10px;}
#AdminMsg{width:350px;height:auto;}
</style>
</head>
<body>
<div class="Message">
<div class="title clearfix">
<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>
<div class="right"><a href="javascript:;" title="最小化" id="open"><img src="images/Minus.png" /></a></div>
</div>
<div class="iframe">
<iframe id="AdminMsg" name="AdminMsg" src="iframe.html" frameborder=0 scrolling=no></iframe>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var AdminMsg=$("#AdminMsg");
//点击最小化和展开
$("#open").click(function(){
var iframeH=AdminMsg.height();
if(iframeH>20){
$(this).html('<img src="adminstyle/1/images/plus.png" />');
$(this).attr({title:"展开"});
AdminMsg.css("height",20);
}else if(iframeH<=20){
$(this).html('<img src="adminstyle/1/images/Minus.png" />');
$(this).attr({title:"最小化"});
AdminMsg.css("height","auto");
};
});
//手动检测
$("#Refresh").click(function(){
$(AdminMsg).attr('src', $(AdminMsg).attr('src'));
});
});
</script>
</body>
</html>

复制代码

素材img(因为素材是透明白色图片，另存为PNG24格式即可)：
Msg.png

Refresh.png

Minus.png

plus.png

		自动登录	找回密码
密码			立即注册

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

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

相关帖子