suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert den einziehbaren Fenstercode mit Animationseffekt auf der rechten Seite der Webseite_Javascript-Fähigkeiten

JS implementiert den einziehbaren Fenstercode mit Animationseffekt auf der rechten Seite der Webseite_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:34:331780Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des einziehbaren Fenstercodes mit Animationseffekten auf der rechten Seite der Webseite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein festes versenkbares Fenster auf der rechten Seite der Webseite mit Puffereffekt. Klicken Sie auf den farbigen Bereich, und das schwebende Ebenenfenster wird erweitert und verkleinert. Klicken Sie erneut, um es zu verkleinern. Kein jQuery, der Effekt ist komplett in JavaScript implementiert.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

<!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>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So berechnen Sie die Fahrstrecke zwischen zwei Orten basierend auf der Baidu-Karte (zwei Sprachen js und C#)_Javascript-KenntnisseNächster Artikel：So berechnen Sie die Fahrstrecke zwischen zwei Orten basierend auf der Baidu-Karte (zwei Sprachen js und C#)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen