JQUERY method to implement fixed position expansion and closing effects in the lower right corner of the web page

Home

Web Front-end

JS Tutorial

JQUERY method to implement fixed position expansion and closing effects in the lower right corner of the web page_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

jquery

The example in this article describes how JQUERY implements the expansion and closing effects at a fixed position in the lower right corner of the web page. Share it with everyone for your reference. The details are as follows:

html code:

<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>

Copy after login

css code:

<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>

Copy after login

js code:

<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>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn