JS實現(xiàn)網(wǎng)頁右側(cè)帶動畫效果的伸縮窗口代碼

更新時間：2015年10月29日 09:57:12 作者：企鵝

這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁右側(cè)帶動畫效果的伸縮窗口代碼,通過JavaScript基于時間函數(shù)實現(xiàn)頁面元素樣式漸變效果,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)網(wǎng)頁右側(cè)帶動畫效果的伸縮窗口代碼。分享給大家供大家參考，具體如下：

這是一款帶緩沖效果的網(wǎng)頁右側(cè)固定伸縮窗口，點擊帶顏色的區(qū)域，浮動的層窗口就會伸縮出來，再次點擊則縮進(jìn)去。無jQuery，完全JavaScript實現(xiàn)的效果。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/

具體代碼如下：

<!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>
<title>帶緩沖效果的網(wǎng)頁右側(cè)固定伸縮窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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>
  這里放置菜單內(nèi)容
 </div>
</div>
<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 () {
  /*如果不需要動態(tài)效果，這兩句足矣
  combox.style.right = flag?'-270px':0;
  flag = !flag;
  */
  clearTimeout(initime);
  //根據(jù)狀態(tài)flag執(zhí)開展開收縮
  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>
</body>
</html>

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: