html 如下
<div id="rightNoticeSlide">
<div class="rightNoticeSlide-title">
<a href="javaScript:void(0)" id="close" target="_self">×</a>
<div class="rightNoticeSlide-title-content" style="">biaoti</div>
<div style="clear:both;"></div>
</div>
<div class="out_message_content " style="">
<div id="message_content" style="">
<ul style="">
<li><a href="index2.html">内容1</a></li>
<li>内容2</li>
<li>内容1</li>
<li>内容2</li>
<li>内容1</li>
<li>内容2</li>
</ul>
</div>
</div>
</div>js 如下
function Jihua_Cnblogs_Com() { $("#rightNoticeSlide").slideDown("slow"); }
function KeleyiAutoHide() { $("#rightNoticeSlide").slideUp("slow"); }
$(document).ready(function () {
var a =setTimeout(function () { KeleyiAutoHide(); },5000);
setTimeout(function () {
Jihua_Cnblogs_Com();
}, 1);
a;
$("#close").click(function () {
KeleyiAutoHide();
});
$("#rightNoticeSlide").hover(function(){
clearTimeout(a);
},function(){
a=setTimeout(function () { KeleyiAutoHide(); },5000)
});
})slidedown 一般是隐藏的div 向下慢慢滑动，全部显示，此例子刚开始向上滑动慢慢全部显示，原因是样式定义了position:fixed;left 及 right,相当于把下面与右边的位置固定了，slidedown应理解为展开，slideup理解为收缩，不能理解为向上滑动或者向下滑动
css 如下
#rightNoticeSlide{border:#ccc 1px solid;z-index:100;width:300px;position:fixed; display:none;background:#fcfcfc; bottom:5px; right:10px; overflow:hidden;}
.rightNoticeSlide-title{border:1px solid #fff;border-bottom:none;width:100%;height:35px;border-bottom:1px solid #ccc;font-size:12px;overflow:hidden;color:#fff;background:#069dd5}
#close{float:right;padding:6px 8px 5px 0;width:16px;line-height:auto;color:#a1e4fd;font-size:14px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;}
#close:hover{color:#fff;}
.rightNoticeSlide-title-content{padding:8px 0 5px 10px;width:100px;line-height:18px;text-align:left;overflow:hidden;}
.out_message_content{padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;}
#message_content{margin:0 5px 0 5px;padding:10px 0 10px 5px;font-size:12px;color:#333;text-align:left;overflow:hidden;}
#message_content ul{color:red;list-style:none;line-height:20px;padding-left:0;}
转载于:https://my.oschina.net/u/2612473/blog/652802
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/109091.html原文链接：https://javaforall.net
