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 相关文章推荐
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
layui table 参数设置方法
Aug 14 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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
天津市收音机工业发展史
2021/03/04 无线电
PHP开发中常用的十个代码样例
2016/02/02 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JS作用域深度解析
2016/12/29 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
python实现邮件自动发送
2019/08/10 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
总经理秘书工作职责
2013/12/26 职场文书
总经理岗位职责范本
2014/02/02 职场文书
2014年林业工作总结
2014/12/05 职场文书
公司股份合作协议书
2014/12/07 职场文书
个人委托函范文
2015/01/29 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
人民的好儿女观后感
2015/06/18 职场文书
休学证明范本
2015/06/19 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
选购到合适的激光打印机
2022/04/21 数码科技