php 张开收缩显示,js实现可以点击收缩或张开的悬浮窗
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下
说明:点击”+“按钮,悬浮窗收缩/展开
思路
1、在html中定义一个div块,定一个id;一个按钮,点击时用。
2、写一个js,包含收缩以及展开的函数;为按钮添加点击事件。
3、想要让悬浮窗好看点,可设置对应的参数。
步骤
html
- item one
- item two
- item three
- item four
- item five
+
js
var menubox = document.getElementById("area"); //area为菜单栏的id
var cli_on = document.getElementById("on"); //on为按钮
var flag = false, timer = null, initime = null, r_len = 0;
if(menubox.style.right=== 0){
flag = true;
}
else{
flag = false;
}
cli_on.onclick = function () {
//为on按钮绑定click事件
clearTimeout(initime);
//根据状态flag执开展开收缩
if (flag) {
r_len = 0;
timer = setInterval(slideright, 10);
} else {
r_len = -160;
timer = setInterval(slideleft, 10);
}
}
//展开
function slideright() {
if (r_len <= -160) {
clearInterval(timer);
flag = !flag;
return false;
}else{
r_len -= 5;
menubox.style.right = r_len + 'px';
}
}
//收缩
function slideleft() {
if (r_len >= 0) {
clearInterval(timer);
flag = !flag;
return false;
} else {
r_len += 5;
menubox.style.right = r_len + 'px';
}
}
完整代码
含css,可直接用
悬浮窗
#area{
position:fixed;
width:160px;
right:-160px;
top:27%;}
#small_menu ul {
list-style: none;
}
#area #on{
position: absolute;
top: 40%;
right: 100%;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 15px;
background-color: rgba(13, 143, 143, 0.2);
}
#area #on p{
font-size:30px;
text-align:center;
margin-top:-6px;
color:#01E290;
}
#area #small_menu {
width:100%;
}
#area #small_menu ul li {
width:100%;
height: 44px;
text-align:left;
background-color: rgba(2, 27, 38, 0.62);
border-top: 1px solid #043B46;
line-height: 44px;
}
#area #small_menu ul li a{
text-decoration: none;
margin-left:30px;
color: #bfbfbf;
font-size:16px;
font-family: 'Microsoft Yahei';
}
#area #small_menu li.active {
width: 156px;
background-color: rgba(2, 27, 38, 0.87);
border-left: 4px solid #00ffff;
border-top: 0px;
}
#area #small_menu li.active a{
color: #00ffff;
}
#area #small_menu ul li:hover {
width: 156px;
background-color: rgba(2, 27, 38, 0.87);
border-left: 4px solid #00ffff;
}
#area #small_menu ul li:hover a{
color: #00ffff;
}
- item one
- item two
- item three
- item four
- item five
+
//嵌套在页面中,文档初始化时加载。
var menubox = document.getElementById("area"); //area为菜单栏的id
var cli_on = document.getElementById("on"); //on为按钮
var flag = false, timer = null, initime = null, r_len = 0;
if(menubox.style.right=== 0){
flag = true;
}
else{
flag = false;
}
cli_on.onclick = function () {
//为on按钮绑定click事件
clearTimeout(initime);
//根据状态flag执开展开收缩
if (flag) {
r_len = 0;
timer = setInterval(slideright, 10);
} else {
r_len = -160;
timer = setInterval(slideleft, 10);
}
}
//展开
function slideright() {
if (r_len <= -160) {
clearInterval(timer);
flag = !flag;
return false;
}else{
r_len -= 5;
menubox.style.right = r_len + 'px';
}
}
//收缩
function slideleft() {
if (r_len >= 0) {
clearInterval(timer);
flag = !flag;
return false;
} else {
r_len += 5;
menubox.style.right = r_len + 'px';
}
}
小结到此。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2017-09-17
php 张开收缩显示,js实现可以点击收缩或张开的悬浮窗相关推荐
- div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...
- android悬浮按钮弹出与隐藏,Android悬浮窗按钮实现点击并显示/隐藏多功能列表
前言 最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来 ...
- android仿照360壁纸照片显示特效,Android仿360桌面手机卫士悬浮窗效果
大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我先说几句不相干的话. 不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多 ...
- 京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
- html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
- html判断隐藏显示,js 判断DIV是否隐藏的方法
js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅.那么飞鸟慕鱼博客就来说一说,如何判断d ...
- java侧边栏_[Java教程]js实现的侧边栏展开收缩效果
[Java教程]js实现的侧边栏展开收缩效果 0 2016-02-12 16:00:09 js实现的侧边栏展开收缩效果: 在很多应用中,尤其是客服系统一般具有这样的效果,那就是默认状态下,会折叠在网页 ...
- 砖垛之ExpandableTextView-自定义可以动态展开/收缩显示长文本的TextView
一.实现效果 二.项目地址: https://github.com/Carbs0126/ExpandableTextView 三.集成 app的build.gradle文件里添加依赖 compile ...
最新文章
- 对约束条件优化问题的理解
- django中聚合aggregate和annotate GROUP BY的使用方法
- Excel VBA 处理图形图表详解
- Simple Addition expression【打表+二分】
- docker开启mysql的binlog日志
- 西安建筑科技大学安德学院计算机专业,【图片】【安德学院】身在建大,志在四方【西安建筑科技大学吧】_百度贴吧...
- python 采集系统_python—收集系统信息
- 编写一个简单的JavaScript模板引擎
- 组合数性质--二项式系数之和等于2^n的证明
- win10计算机怎么改中文,win10系统中文语言的设置方法
- php mysql 表情录入_php + mysql 存入表情 【如何转义emoji表情,让它可以存入utf8的数据库】...
- STM32CUBEIDE配置FreeRTOS
- 初步分析CCLE和GDSC的数据——RNA表达矩阵
- Write Combining Buffer
- 华为上研所无线嵌入式优招面经
- ps -ef | grep httpd | grep -v grep | wc -l
- 计算机毕业设计,这6个网站早知道,太牛了
- dvcs-ripper安装教程
- Python Web自动化测试学习-PO模型在自动化测试中的应用(2)
- 12个降维技术的终极指南(使用Python代码)
热门文章
- [网络安全自学篇] 八.Web漏洞及端口扫描之Nmap、ThreatScan和DirBuster原理详解
- Python之超级好用的8个VS Code扩展
- Swift之深入解析异步函数async/await的使用与运行机制
- LeetCode 多线程 1114. 按序打印
- 计算机网络——IP地址与MAC地址
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1089:数字反转
- python语言实现飞机大战
- Java常用API(五)Math 数学类
- 【物联网】OpenWrt编译出现Unable to find remote helper for 'https'问题
- [Qt教程] 第11篇 2D绘图(一)绘制简单图形