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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript实现英语单词题库
Dec 24 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
dedecms模板标签代码官方参考
2007/03/17 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
js自带函数备忘 数组
2006/12/29 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python写入已存在的excel数据实例
2018/05/03 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
旅游管理专业学生求职信
2013/09/28 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014年采购工作总结
2014/11/20 职场文书
护理专业自我评价
2015/03/11 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python