js实现可以点击收缩或张开的悬浮窗

本文实例为大家分享了射流研究…实现悬浮窗的具体代码，供大家参考，具体内容如下

说明：点击" "按钮，悬浮窗收缩/展开

思路

1、在超文本标记语言中定义一个差异块，定一个id；一个按钮，点击时用。

2、写一个js，包含收缩以及展开的函数；为按钮添加点击事件。

3、想要让悬浮窗好看点，可设置对应的参数。

步骤

超文本标记语言

div id=' area ' div id=' small _ menu ' ul lia href=' # '第一项/a/li lia href='# '第二项/a/li lia href='# '第三项/a/li lia href='# '第四项/a/li lia href='# '第五项/a/Li/ul/div id=' on ' onclick='傅玄();'p/p/div/

var menubox=文档。getelementbyid(' area ')；//区域为菜单栏的id var CLI _ on=文档。getelementbyid(' on ')；//on为按钮var flag=false，timer=null，initime=null，r _ len=0；if(menubox。风格。right===0){ flag=true；} else { flag=false } CLI _ on . onclick=function(){//为在按钮绑定点击事件clear time out(initime)；//根据状态旗执开展开收缩if(flag){ r _ len=0；timer=setInterval(slideright，10)；} else { r _ len=-160；timer=setInterval(slideleft，10)；} } //展开函数向右滑动(){ if(r _ len=-160){ clearInterval(计时器);flag=！旗帜；返回false } else { r _ len-=5；menubox。风格。right=r _ len ' px} } //收缩函数向左滑动(){ if(r _ len=0){ clearInterval(计时器)；flag=！旗帜；返回false } else { r _ len=5；menubox。风格。right=r _ len ' px} } 完整代码

含css，可直接用

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title悬浮窗/title/head style type=' text/CSS ' # area {位置：固定；宽度宽度：160 pxright :-160 px；top :27 } # small _ menu ul { list-style : none；{位置：绝对值}上的{ # area #前：名40%；右： 100%;宽度： 30px高度： 30pxcursor:指针；边框半径： 15px背景-color: rgba(13，143，143，0.2)；} # p { font-size :30 px文本对齐：居中；边距-top :-6px；color : # 01e 290 } # area # small _ menu { width :100%；} #区域# small _ menu ul Li {宽度：100%；高度： left向左对齐：背景-color: rgba(2，27，38，0.62)；边框-top: 1px实心# 043B46线高： 44px} #区域#小菜单ul阿利{ text-摆设：无；边距-左侧：30像素；color : # bfbfbffont-size :16 px；字体系列： '微软雅黑；} #区#小_菜单李。活动{宽度： 156 px背景-color: rgba(2，27，38，0.87)；边框-左侧： 4px实心# 00 ffffborder-top : 0px；} #区#小_菜单李。激活a { color : # 00 ffff} # area # small _ menu ul Li :悬停{ width : 156 px背景-color: rgba(2，27，38，0.87)；边框-左侧： 4px实心# 00ffff} #区域# small _ menu ul Li :悬停a { color : # 00 ffff }/style body div id=' area ' div id=' small _ menu ' ul lia href=' # '第一项/a/li lia href='# '第二项/a/li lia href='# '第三项/a/li lia href='# '第四项/a/li lia href='# '第五项/a/Li/ul/div id=' on ' onclick='傅玄();'p/p/div/嵌套在页面中，文档初始化时加载var menubox=文档。getelementbyid(' area ')；//区域为菜单栏的id var CLI _ on=文档。getelementbyid(' on ')；//on为按钮var flag=false，timer=null，initime=null，r _ len=0；if(menubox。风格。right===0){ flag=true；} else { flag=false } CLI _ on . onclick=function(){//为在按钮绑定点击事件clear time out(initime)；//根据状态旗执开展开收缩if(flag){ r _ len=0；timer=setInterval(slideright，10)；} else { r _ len=-160；timer=setInterval(slideleft，10)；} } //展开函数向右滑动(){ if(r _ len=-160){ clearInterval(计时器);flag=！旗帜；返回false } else { r _ len-=5；menubox。风格。right=r _ len ' px} } //收缩函数向左滑动(){ if(r _ len=0){ clearInterval(计时器)；flag=！旗帜；返回false } else { r _ len=5；menubox。风格。right=r _ len ' px} }/脚本/正文/html小结到此。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。