js pour obtenir un effet d'affichage progressif similaire aux compétences Sina Weibo homepage

js pour obtenir un effet d'affichage progressif similaire aux compétences Sina Weibo homepage_javascript

WBOY

Libérer： 2016-05-16 16:05:01

original

961 Les gens l'ont consulté

L'exemple de cet article décrit la méthode js pour obtenir un effet d'affichage progressif similaire au contenu de la page d'accueil de Sina Weibo. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Point 1 :

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

Copier après la connexion

Insérez un nouveau contenu au début. S'il n'y a pas de nouveau contenu, insérez un nouveau contenu à la fin.

Point 2 :

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

Copier après la connexion

Obtenez la hauteur de li, puis définissez la hauteur de li sur 0, car la hauteur passe de 0 à la hauteur actuelle.

Point trois :

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

Copier après la connexion

D'abord la hauteur change, puis la transparence change

Enfin, ajoutez le code :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.