js实现可以点击收缩或张开的悬浮窗
本文实例为大家分享了js实现悬浮窗的具体代码，供大家参考，具体内容如下
说明：点击”+“按钮，悬浮窗收缩/展开
思路
1、在html中定义一个div块，定一个id；一个按钮，点击时用。
2、写一个js,包含收缩以及展开的函数；为按钮添加点击事件。
3、想要让悬浮窗好看点，可设置对应的参数。
步骤
html
<div id="area">
<div id="small_menu">
<ul>
<li><a href="#">item one</a></li>
<li><a href="#">item two</a></li>
<li><a href="#">item three</a></li>
<li><a href="#">item four</a></li>
<li><a href="#">item five</a></li>
</ul>
</div>
<div id="on" onclick="xuanfu();"><p>+</p></div>
</div>
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,可直接用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬浮窗</title>
</head>
<style type="text/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;
}
</style>
<body>
<div id="area">
<div id="small_menu">
<ul>
<li><a href="#">item one</a></li>
<li><a href="#">item two</a></li>
<li><a href="#">item three</a></li>
<li><a href="#">item four</a></li>
<li><a href="#">item five</a></li>
</ul>
</div>
<div id="on" onclick="xuanfu();"><p>+</p></div>
</div>
<script>
//嵌套在页面中，文档初始化时加载。
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';
}
}
</script>
</body>
</html>
小结到此。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript 悬浮窗口实现代码
效果如图:代码如下: 悬浮窗口示例 window.onscroll = function () { var div = document.getElementById("divSuspended"); div.style.top = document.body.scrollTop; } window.onresize = window.onscroll; function init(){ var df = document.createDocumentFragment(); for(v
-
JS百度地图搜索悬浮窗功能
这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的.文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular 效果图: 代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <me
-
JS控制弹出悬浮窗口(一览画面)的实例代码
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu
-
js实现悬浮窗效果(支持拖动)
经常可以看到大部分的官网有右侧悬浮在线客服.今天来写写! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js悬浮窗代码(支持拖动)</title> <meta name="descriptio
-
js点击出现悬浮窗效果不使用JQuery插件
JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的. 直接上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript">
-
javascript实现的固定位置悬浮窗口实例
本文实例讲述了javascript实现的固定位置悬浮窗口.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
js实现可以点击收缩或张开的悬浮窗
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下 说明:点击"+"按钮,悬浮窗收缩/展开 思路 1.在html中定义一个div块,定一个id:一个按钮,点击时用. 2.写一个js,包含收缩以及展开的函数:为按钮添加点击事件. 3.想要让悬浮窗好看点,可设置对应的参数. 步骤 html <div id="area"> <div id="small_menu"> <ul> <li>
-
js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu
-
js简单的点击返回顶部效果实现方法
本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum
-
js实现鼠标点击左上角滑动菜单效果代码
本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
-
JS实现的点击表头排序功能示例
本文实例讲述了JS实现的点击表头排序功能.分享给大家供大家参考,具体如下: 运行效果: 1.index.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jb51.net点击表头排序</t
-
JS实现可点击展开与关闭的左侧广告代码
本文实例讲述了JS实现可点击展开与关闭的左侧广告代码.分享给大家供大家参考.具体如下: 这里介绍的是JS实现网页上可点击展开.关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击"显示"的时候,它会重新打开广告,这种广告可以提高网页的用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-close-style-ad
-
JS模拟按钮点击功能的方法
本文实例讲述了JS模拟按钮点击功能的方法.分享给大家供大家参考,具体如下: <html> <head> <title>usually function</title> </head> <script> function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); document.getElementById("t
-
js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click
-
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
今天遇到一个很奇葩的需求,是这样的:当我点击文字的时候弹出一个删除按钮,可以删除刚才点击的文字. 诶?当时想了想,没什么难度吧.可是,既然是奇葩的需求怎么可能这么简单. 对,还有一个功能.我并不知道我点了哪个标签,英文可以承载文字的标签太多太多.... 当时我tm就懵逼了.你都不知道要点哪个标签,我怎么去绑定事件?给谁绑定事件? 扯了半天,还是要写.于是就动工了. 我思路是这样的: START 1,首先得获取鼠标点击的对象.(问题是...我怎么知道点了哪个) 那么先写个函数去获取鼠标点击的对象
-
JS实现鼠标点击展开或隐藏表格行的方法
本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm