recherche

Maison  >  Article  >  interface Web  >  JS implémente le code de fenêtre rétractable avec effet d'animation sur le côté droit de la page Web_javascript skills

JS implémente le code de fenêtre rétractable avec effet d'animation sur le côté droit de la page Web_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:34:331760parcourir

L'exemple de cet article décrit l'implémentation JS du code de fenêtre rétractable avec des effets d'animation sur le côté droit de la page Web. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'une fenêtre rétractable fixe sur le côté droit de la page Web avec un effet tampon. Cliquez sur la zone colorée, et la fenêtre du calque flottant s'agrandira et se contractera, puis cliquez à nouveau pour la réduire. Pas de jQuery, l'effet est entièrement implémenté en JavaScript.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>带缓冲效果的网页右侧固定伸缩窗口</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>
  这里放置菜单内容
 </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 () {
  /*如果不需要动态效果，这两句足矣
  combox.style.right = flag&#63;'-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>
</body>
</html>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment calculer la distance de conduite entre deux lieux sur la base de la carte Baidu (deux langues​​js et C#)_compétences javascriptArticle suivant：Comment calculer la distance de conduite entre deux lieux sur la base de la carte Baidu (deux langues​​js et C#)_compétences javascript

Articles Liés

Voir plus