Kaedah JQUERY untuk melaksanakan peluasan kedudukan tetap dan kesan penutupan di sudut kanan bawah halaman web_jquery

Contoh dalam artikel ini menerangkan cara JQUERY melaksanakan kesan pengembangan dan penutupan pada kedudukan tetap di penjuru kanan sebelah bawah halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

kod html:

<div class="tagbox">
<div class="tag">
<span>热门标签...</span>
<ul>
<li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起</a></li>
<li><a href='/tag/js幻灯片_1.html' target="_blank">js幻灯片</a></li>
<li><a href='/tag/js特效_1.html' target="_blank">js特效</a></li>
<li><a href='/tag/广告代码_1.html' target="_blank">广告代码</a></li>
<li><a href='/tag/对联广告_1.html' target="_blank">对联广告</a></li>
<li><a href='/tag/js弹出层_1.html' target="_blank">js弹出层</a></li>
<li><a href='/tag/无缝滚动_1.html' target="_blank">无缝滚动</a></li>
<li><a href='/tag/php教程_1.html' target="_blank">php教程</a></li>
<li><a href='/tag/ajax实例_1.html' target="_blank">ajax实例</a></li>
</ul>
</div>
<div class="guanbi"><a href="javascript:;" target="_blank">点击关闭</a></div>
</div>
<div class="zhangkai"><a href="javascript:;">热门标签</a></div>
<div class="xx"></div>

kod css:

<style type="text/css">
ul,li{ margin:0px; padding:0px; list-style:none;}
.tagbox{ width:100px; height:auto; border:1px solid #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:5px 10px;}
.tag span{ width:80px; height:30px; display:block; line-height:30px; color:#006600; font-size:12px;}
.tag li{ width:80px; height:24px; line-height:24px; font-size:12px; overflow:hidden;}
.tag li a{ color:#336699;}
.tag li a: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:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px;}
.guanbi a{ color:#666666; text-decoration:none;}
.zhangkai{ width:20px; height:auto; padding:10px 5px; line-height:20px; font-size:14px; text-align:center;-webkit-border-radius:5px 0px 0px 5px;-moz-border-radius:5px 0px 0px 5px;border-radius:5px 0px 0px 5px; border:1px solid #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;}
.zhangkai a{color:#006600; text-decoration:none;}
.xx{ height:1000px;}
</style>

kod js:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   $(".guanbi a").click(function(){
    $(".tagbox").hide();
    $(".zhangkai").show();
    return false;
   });   
   $(".zhangkai").click(function(){
    $(".zhangkai").hide();
    $(".tagbox").show(500);
    return false;
   });
  });
</script>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.