Heim > Artikel > Web-Frontend > js-Methode, um einen allmählichen Anzeigeeffekt zu erzielen, der den Fähigkeiten von Sina Weibo homepage_javascript ähnelt

js-Methode, um einen allmählichen Anzeigeeffekt zu erzielen, der den Fähigkeiten von Sina Weibo homepage_javascript ähnelt

WBOYOriginal: 2016-05-16 16:05:01933Durchsuche

Das Beispiel in diesem Artikel beschreibt die js-Methode, um einen allmählichen Anzeigeeffekt ähnlich dem Inhalt der Sina Weibo-Homepage zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Punkt 1:

if(list_li.length>=1){
list.insertBefore(li,list_li[0]);
}else{
list.appendChild(li);
}

Neuen Inhalt am Anfang einfügen. Wenn kein neuer Inhalt vorhanden ist, fügen Sie am Ende neuen Inhalt ein.

Punkt 2:

var height=li.offsetHeight;
li.style.height='0';

Ermitteln Sie die Höhe von li und setzen Sie dann die Höhe von li auf 0, da sich die Höhe von 0 auf die aktuelle Höhe ändert.

Punkt drei:

startrun(li,"height",height,function(){
startrun(li,"opacity","100");
})

Zuerst ändert sich die Höhe, dann ändert sich die Transparenz

Zum Schluss fügen Sie den Code hinzu:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
#list{width:400px; margin:10px auto;}
#list li{list-style:none; padding:5px 0 ;
overflow:hidden; border-bottom:1px dotted #ccc;
filter:alpha(opacity:0); opacity:0; vertical-align:middle;}
-->
</style>
<script>
<!--
window.onload = function(){
 var btn = document.getElementById("btn");
 var con = document.getElementById("con");
 var list = document.getElementById("list");
 var list_li = list.getElementsByTagName("li");
 btn.onclick = function(){
  var li = document.createElement("li");
  li.innerHTML = con.value;
  con.value='';
  if(list_li.length>=1){
   list.insertBefore(li,list_li[0]);
  }else{
   list.appendChild(li);
  }
  var height=li.offsetHeight;
  li.style.height='0';
  startrun(li,"height",height,function(){
   startrun(li,"opacity","100");
  })
 }
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<textarea id="con" cols="50" rows="5"></textarea>
<input id="btn" name="" type="button" value="发布">
<ul id="list">
</ul>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：js-Methode zum Erzielen ähnlicher Animationseffekte wie animate in jquery_javascript-FähigkeitenNächster Artikel：js-Methode zum Erzielen ähnlicher Animationseffekte wie animate in jquery_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen