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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
JS实现数组去重的11种方法总结
Apr 04 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
用js遍历 table的脚本
2008/07/23 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
浅析Python中的for 循环
2016/06/09 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
学生个人的自我评价分享
2013/11/05 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
公司承诺书范文
2014/05/19 职场文书
实习推荐信格式模板
2015/03/27 职场文书
结婚通知短信大全
2015/04/17 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
培训计划通知
2015/07/15 职场文书
分享python函数常见关键字
2022/04/26 Python