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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
vue一步步实现alert功能
Jul 05 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
微信小程序实现图片滚动效果示例
Dec 05 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php两种无限分类方法实例
2015/04/21 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
python+opencv识别图片中的圆形
2020/03/25 Python
在python中安装basemap的教程
2018/09/20 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
django的csrf实现过程详解
2019/07/26 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
优秀班集体申报材料
2014/12/25 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
经营目标责任书
2015/05/08 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
学习nginx基础知识
2021/09/04 Servers
php实例化对象的实例方法
2021/11/17 PHP
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript