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 ...
最新文章
- 竞赛|数据竞赛Top解决方案开源整理
- JSON Undefined 问题
- 通过hibernate去调用存储过程
- 在Silverlight+WCF中应用以角色为基础的安全模式(一)基础篇之角色为基础的安全模式简介...
- php if 单行,php – 单行if语句或if语句没有大括号坏习惯?
- Myeclipse学习总结(12)——Eclipse/MyEclipse实用技巧再回顾
- 网络工程师Day2---实验2-1:HDLC和PPP配置
- Lumia 830 win10m 启用触摸按键
- 代码轻视频系列#001
- Java 线程池实际运用案例
- mysql误删除恢复
- 嘿,程序猿,你该学点经济学了!
- Matlab是常见的高级语,高级语言具有哪些特点 试述低级语言与高级语言的特点...
- C++实现走迷宫算法(1)
- 麻雀算法极限学习机SSA-ELM回归预测及其MATLAB代码实现
- 华为云鲲鹏云服务介绍
- Docker开启TLS和CA认证, 解决暴露2375端口引发的安全漏洞, 并使用idea连接并推送镜像
- 学生成绩排名 (用结构体数组按成绩排名)
- 新版个人所得税计算python_2019年新税率工资计算器(python脚本) | linux系统运维...
- Caffe深度学习框架上手教程
热门文章
- iOS之从N个数里面取M个数的组合算法
- LeetCode 多线程 1116. 打印零与奇偶数
- ubuntu 16.04 安装教程
- 【STM32】窗口看门狗相关类型和函数
- 【Tools】Visual Studio 2019下载和安装
- 【Android】 Android体系结构图
- linux安装完怎么分区,Linux系统安装模式下硬盘分区怎么做?
- 事务回滚什么意思 try_三问Spring事务:解决什么问题?如何解决?存在什么问题?...
- python小黄人程序_python signal信号
- wave文件 fft_STM32F103 如何实现 FFT?