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 相关文章推荐
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
js函数和this用法实例分析
Mar 13 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
使用JS实现简易计算器
Jun 14 Javascript
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和ACCESS写聊天室(二)
2006/10/09 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
学习jquery之一
2007/04/27 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python中如何使用虚拟环境
2020/10/14 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
建筑设计专业求职自我评价
2014/03/02 职场文书
年终总结会主持词
2014/03/25 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书