始终飘浮动于网页右侧可缓冲效果弹出和收缩QQ客服代码的特效实例

稿源：互联网 2018-09-20 01:04:01 点击： 21737 撤稿纠错

一款漂浮在网页右侧的菜单js特效，很多在线QQ的客服插件代码就是这样的效果...

以下讨论的是和右侧弹出缓冲效果漂浮 QQ客服代码相关的始终飘浮动于网页右侧可缓冲效果弹出和收缩QQ客服代码的特效实例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右侧弹出固定伸缩框</title>
<style type="text/css">
#common_box{width:300px;position:fixed;_position:absolute;right:0;top:40%;border:1px solid #789;background:#fff;z-index:88}
#cli_on{width:30px;height:180px;float:left;cursor:pointer;background:#ac8932;text-align:center;line-height:180px}
</style>
</head>

<body>
<div style="width:100%;height:1024px;background:#789"></div>
<div id="common_box">
 <div id="cli_on">+</div>
 <div>
  这里放置菜单内容 js.alixixi.com
 </div>
</div>

</body>
</html>
<script type="text/javascript">
window.onload = function() {
 var combox = document.getElementById("common_box");
 var cli_on = document.getElementById("cli_on");
 var flag = true, timer = null, initime = null, r_len = 0;
 
 cli_on.onclick = function () {
  /*如果不需要动态效果，这两句足矣
  combox.style.right = flag?'-270px':0;
  flag = !flag;
  */
  clearTimeout(initime);
  //根据状态flag执开展开收缩
  if (flag) {
   r_len = 0;
   timer = setInterval(slideright, 10);
  } else {
   r_len = -270;
   timer = setInterval(slideleft, 10);
  }
 }
 
 //展开
 function slideright() {
  if (r_len <= -270) {
   clearInterval(timer);
   flag = !flag;
   return false;
  } else {
   r_len -= 5;
   combox.style.right = r_len + 'px';
  }
  
 }
 
 //收缩
 function slideleft() {
  if (r_len >= 0) {
   clearInterval(timer);
   flag = !flag;
   return false;
  } else {
   r_len += 5;
   combox.style.right = r_len + 'px';
  }
 }
 
 //加载后3秒页面自动收缩
 initime = setTimeout("cli_on.click()", 3000);
}
</script>

关于始终飘浮动于网页右侧可缓冲效果弹出和收缩QQ客服代码的特效实例的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092084239.shtml方便下次再访问哦。

·上一篇： 简单易懂的jquery制作可拖动图层特效代码
·下一篇： 利用jquery制作的div模拟select下拉菜单的特效代码

始终飘浮动于网页右侧可缓冲效果弹出和收缩QQ客服代码的特效实例

文章分类LIST >>返回首页

最新游戏

最新新闻