JQUERY实现网页右下角固定位置展开关闭特效的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法。分享给大家供大家参考。具体如下:

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>

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>

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>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
JQ技术实现注册页面带有校验密码强度
Jul 27 #Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 #Javascript
在for循环中length值是否需要缓存
Jul 27 #Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 #Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
You might like
php json中文编码为null的解决办法
2016/12/14 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现简单字典树的方法
2016/04/29 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python中拆分字符串的操作方法
2019/07/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python怎么判断模块安装完成
2020/06/19 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python实现经典排序算法的示例代码
2021/02/07 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
白血病募捐倡议书
2014/05/14 职场文书
董事长秘书工作职责
2014/06/10 职场文书
明星员工获奖感言
2014/08/14 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
赔偿协议书
2015/01/27 职场文书
导游词欢迎词
2015/02/02 职场文书