JavaScript + jQuery realisiert einen 360-Grad-Anzeigeeffekt für die Startzeit-js-Tutorial-php.cn

JavaScript + jQuery realisiert einen 360-Grad-Anzeigeeffekt für die Startzeit

小云云

Freigeben： 2017-12-09 13:51:53

Original

1660 Leute haben es durchsucht

In diesem Artikel stellen wir hauptsächlich Javascript + jQuery vor, um den 360-Grad-Startzeitanzeigeeffekt zu realisieren. Ich hoffe, dass er Ihnen helfen kann.

Implementierungseffekt:

Implementierungsprinzip:

Schließen-Schaltfläche binden Klicken Ereignis, löst nach dem Klicken einen Animationseffekt aus. Ändern Sie mit der Animationsmethode von jQuery zunächst die Höhe des Felds, in dem das Wetter angezeigt wird, auf 0, ändern Sie dann die Breite des gesamten Felds, das Wetter und Ereignisse enthält, auf 0 und setzen Sie schließlich den Wert des Anzeigeattributs auf „Keine“, damit die Schaltfläche „Schließen“ verschwindet.

Implementierungscode:

<!DOCTYPE html>
<html>
<head>
 <title>仿360开机效果</title>
 <meta charset="utf-8">
 <style type="text/css">
  *{
   padding: 0;
   margin: 0;
  }
  .box{
   width: 320px;
   position: fixed;
   bottom: 0;
   right: 0;
   box-shadow: 1px 1px 10px #2d2d2d;
  }
  #close{
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 20px;
   cursor: pointer;
   background-color: red;
   color: pink;
   font-weight: bold;
   text-align: center;
  }
  .hd{
   width: 320px;
   height: 300px;
   background-color: #03c03c;
   color: #fff;
   font-size: 70px;
   line-height: 300px;
   text-align: center;
  }
  .bd{
   width: 320px;
   height: 100px;
   background-color: #fffc00;
   font-size: 30px;
   line-height: 100px;
   text-align: center;
  }
 </style>
</head>
<body>
<p class="box">
 <span id="close">X</span>
 <p class="hd" id="t">1分12秒</p>
 <p class="bd" id="b">天气：晴天</p>
</p>
<!-- 引入jQuery -->
<script type="text/javascript" src="./jquery1.0.0.1.js"></script>
<script type="text/javascript">
 window.onload = function(){
  var close = document.getElementById("close");
  var box = close.parentNode;
  var b = document.getElementById("b");
  // 给关闭按钮绑定点击事件
  close.onclick = function(){
   animate(b, {"height":0}, function(){
    animate(box,{"width":0});
   });
   close.style.display = "none";
  }
 }
</script>
</body>
</html>

Nach dem Login kopieren

PS: JS-Implementierungszeit-Countdown

<script type="text/javascript">
var maxtime = 1350057600 //截止到的日期
var now=parseInt((new Date().getTime())/1000);//获取当前的日期
var cha_time=maxtime-now;//中间所差的时间

Nach dem Login kopieren

Die folgende Methode kombiniert den Zeitunterschied zu einer Countdown-Zeichenfolge und fügt sie dann an der entsprechenden Position der Seite ein Aktualisierung in Echtzeit erreichen

function CountDown(){ 
if(cha_time>=0){
var day = Math.floor(cha_time/3600/24);
var hour= Math.floor((cha_time/3600)%24);
var minutes = Math.floor((cha_time/60)%60); 
var seconds = Math.floor(cha_time%60); 
msg = "离结束还有"+day+"天"+hour+"小时"+minutes+"分"+seconds+"秒"; 
$(".ws_sg_con_big,.ws_sg_con_small").find("dd").html(msg);
--cha_time; 
} 
else{ 
clearInterval(timer); 
alert("时间到，结束!"); 
} 
} 
timer = setInterval("CountDown()",1000); 
</script>

Nach dem Login kopieren

Verwandte Empfehlungen:

Javascript implementiert den Stilwechsel zwischen Computer- und Mobilversionen

So blockieren Sie die Rücktaste mit JavaScript

So funktioniert JavaScript

Das obige ist der detaillierte Inhalt vonJavaScript + jQuery realisiert einen 360-Grad-Anzeigeeffekt für die Startzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!