JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法。分享给大家供大家参考。具体如下：
html代码：
<divclass="tagbox"> <divclass="tag"> <span>热门标签...</span> <ul> <li><ahref='/tag/js展开收起_1.html'target="_blank">js展开收起</a></li> <li><ahref='/tag/js幻灯片_1.html'target="_blank">js幻灯片</a></li> <li><ahref='/tag/js特效_1.html'target="_blank">js特效</a></li> <li><ahref='/tag/广告代码_1.html'target="_blank">广告代码</a></li> <li><ahref='/tag/对联广告_1.html'target="_blank">对联广告</a></li> <li><ahref='/tag/js弹出层_1.html'target="_blank">js弹出层</a></li> <li><ahref='/tag/无缝滚动_1.html'target="_blank">无缝滚动</a></li> <li><ahref='/tag/php教程_1.html'target="_blank">php教程</a></li> <li><ahref='/tag/ajax实例_1.html'target="_blank">ajax实例</a></li> </ul> </div> <divclass="guanbi"><ahref="javascript:;"target="_blank">点击关闭</a></div> </div> <divclass="zhangkai"><ahref="javascript:;">热门标签</a></div> <divclass="xx"></div>
css代码：
<styletype="text/css">
ul,li{margin:0px;padding:0px;list-style:none;}
.tagbox{width:100px;height:auto;border:1pxsolid#CCCCCC;POSITION:fixed;_position:absolute;_margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);z-index:99;right:0px;bottom:25px;background-color:#FFFFFF;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.tag{width:80px;height:auto;padding:5px10px;}
.tagspan{width:80px;height:30px;display:block;line-height:30px;color:#006600;font-size:12px;}
.tagli{width:80px;height:24px;line-height:24px;font-size:12px;overflow:hidden;}
.taglia{color:#336699;}
.taglia:hover{text-decoration:underline;color:#FF0000;}
.guanbi{width:100px;height:26px;background-color:#F0F0F0;line-height:26px;font-size:12px;text-align:center;-webkit-border-radius:0px0px5px5px;-moz-border-radius:0px0px5px5px;border-radius:0px0px5px5px;}
.guanbia{color:#666666;text-decoration:none;}
.zhangkai{width:20px;height:auto;padding:10px5px;line-height:20px;font-size:14px;text-align:center;-webkit-border-radius:5px0px0px5px;-moz-border-radius:5px0px0px5px;border-radius:5px0px0px5px;border:1pxsolid#CCCCCC;POSITION:fixed;_position:absolute;_margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);z-index:100;right:0px;bottom:50px;background-color:#FFFFFF;display:none;}
.zhangkaia{color:#006600;text-decoration:none;}
.xx{height:1000px;}
</style>
js代码：
<scripttype="text/javascript"src="js/jquery-1.2.6.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".guanbia").click(function(){
$(".tagbox").hide();
$(".zhangkai").show();
returnfalse;
});
$(".zhangkai").click(function(){
$(".zhangkai").hide();
$(".tagbox").show(500);
returnfalse;
});
});
</script>
希望本文所述对大家的jquery程序设计有所帮助。