展开关闭页面html,JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法。分享给大家供大家参考。具体如下:
html代码:
热门标签...
- js展开收起
- js幻灯片
- js特效
- 广告代码
- 对联广告
- js弹出层
- 无缝滚动
- php教程
- ajax实例
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;}
js代码:
$(document).ready(function(){
$(".guanbi a").click(function(){
$(".tagbox").hide();
$(".zhangkai").show();
return false;
});
$(".zhangkai").click(function(){
$(".zhangkai").hide();
$(".tagbox").show(500);
return false;
});
});
希望本文所述对大家的jquery程序设计有所帮助。
展开关闭页面html,JQUERY实现网页右下角固定位置展开关闭特效的方法相关推荐
- jQuery实现网页右下角悬浮层提示
最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...
- jQuery实现网页右下角弹出广告
以前曾写过一个,不过太麻烦了,呵呵``` 现在改进了一下, 其实很简单:css定位层一直在右下角,用js控制层的高度增减. 代码: <!DOCTYPE html PUBLIC "-// ...
- HTML_页面点击按钮关闭页面的几种方式
HTML页面点击按钮关闭页面的几种方式 文章目录 HTML页面点击按钮关闭页面的几种方式 一.不带任何方式的关闭窗口 二.提示之后关闭页面 三.点击关闭本页面并跳转到其他页面 四.将 三 中的方法放到 ...
- php 右下脚弹窗,多种样式jQuery网页右下角弹出提示信息代码
多种样式jQuery网页右下角弹出提示信息代码,extjs右下角消息提示框,Jquery Messager消息弹出插件. 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 js代码 $ ...
- jquery右下角自动弹出关闭层
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/36.htm 右下角弹出层后,会在一定时间后自动隐藏.第一版本:http://www.cnblogs.com/ ...
- php脚本判断页面刷新,javascript判断网页是关闭还是刷新
原理就是通过离开页面行为时间onunload触发时间去检测此时的浏览器的窗口大小,根据大小由此判断用户是刷新,跳转或是关闭行为程序 代码如下 window.onunload = function(){ ...
- JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小 订阅 全屏显示 ---------------------- ...
- 微信/支付宝/网页--扫码进入H5页面,完成业务后关闭页面
1:html <span class="date">{{countdown}} 秒后自动退出</span><div class="btn_o ...
- php 关闭网页 session,php直接关闭页面怎么注销SESSION
php直接关闭页面注销SESSION的实现方法:首先每个页面都必须开启"session_start()"后才能在页面里面使用session:然后用户下次访问时,session_st ...
最新文章
- 《让系统发生重大宕机事故的15个方法》
- Gmail进程信息转储分析工具pdgmail
- 没有可用软件包 jenkins。_Jenkins分布式构建与并行构建
- Docker:集装箱式“运输”在软件上的实现
- Java FilterInputStream reset()方法与示例
- 当 Swagger 遇上 Torna,瞬间高大上了!
- python怎么换行继续写脚本_python怎么换行继续写脚本
- linux 下 php 安装 libevent
- ❤️《小黄鸭调试法》程序员必备技能!!!❤️
- 交换机Vlan中tagged和untagged的区别
- 天池项目总结,特征工程了解一下!
- 今日睡眠质量记录77分
- 用IDM怎么批量下载视频
- PhantomJS+Selenium+Scrapy抓取巨潮资讯网企业信息
- python做淘宝客_python 做淘宝客程序(2)
- 常用的计算机病毒检测方法有哪些,计算机病毒检测方法有哪些呢
- OSChina 周日乱弹 ——给苹果电脑选机械键盘
- service层调用service层的方法,并切换数据库调用不同数据库获取数据
- Linux下串口的配置
- 用Xbee实现Arduino之间的无线通信,远程控制小灯