Fonction de publication de messages仿新浪微博 en js

Cette exemple partage avec vous le code détaillé de la publication de messages de Weibo Sina en JavaScript, pour votre référence, le contenu détaillé est comme suit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simuler la fonction de publication de messages de Weibo Sina</title>
<style>
*{marge : 0; marge intérieure : 0;}
#div1{largeur : 400px; hauteur : 400px; bordure : 1px solide; marge :10px auto; position: relative;overflow: hidden;}
#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0);
opacity: 0;}
</style>
<script src="js/chuan.js"></script>
</head>
<body>
  <textarea rows="5" cols="30" id="txt1"value=""></textarea>
  <input type="button" id="btn">1" value="发布" />
    <div id="div">1">
    <ul id="ul">1></ul>
    </div>
<script>
var oUl=document.getElementById('ul');1);
var oTxt1=document.getElementById('txt');1);
var oBtn=document.getElementById('btn');1);
oBtn.onclick=function()
{
var oLi=document.createElement('li');
        oLi.innerHTML=oTxt1.value;
        oTxt1.value='';
        if(oUl.children.length>0)
        {
        oUl.insertBefore(oLi,oUl.children[0]);
        }
        else
        {
        oUl.appendChild(oLi);
        }
        var iHeight=oLi.offsetHeight;
        oLi.style.height=0;
        move(oLi,{height:iHeight},function())
        {
        move(oLi,{opacity:100});
        });
}
</script>
</body>
</html>

chuan,js est un cadre de mouvement parfait que j'ai écrit précédemment :

function getstyle(obj,name)
  {
if(obj.currentStyle)
{
return obj.currentStyle;
}
else
{
return getComputedStyle(obj,false)[name];
}
  }
      function move(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
 var bBox=true;//Hypothèse que toutes les valeurs sont déjà arrivées
 for(var strr in json)
 {
 if(strr=='opacity')
 {
  var cur=Math.round(parseFloat(getstyle(obj,strr))*100);
 }
 else
 {
  var cur=parseInt(getstyle(obj,strr));
 }
 var speed=(json[strr]-cur)/10;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(cur!=json[strr])
 bBox=false;
 if(strr=='opacity')
            {
            obj.style.filter='alpha(opacity:'+(cur+speed+')');
            obj.style.opacity=(cur+speed)/100;
            }
 else
 {
 obj.style[strr]=cur+speed+'px';
 }
 }
 if(bBox)
 {
 clearInterval(obj.timer);
 if(fnEnd)fnEnd();
 }
},30);
};

Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère que vous soutiendrez également le tutoriel d'alarme.

Déclaration : Le contenu de cet article est tiré d'Internet, propriété des auteurs respectifs, contribué et téléchargé par les utilisateurs d'Internet, ce site n'a pas de propriété, n'a pas été édité par l'homme, ni n'assume la responsabilité des responsabilités juridiques associées. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base