js-Imitation der Nachrichtenausgabefunktion von Sina Weibo

Dieser Artikel teilt Ihnen das spezifische Codebeispiel für die Nachahmung der Nachrichtenveröffentlichungsfunktion von Sina Weibo mit, das für Ihre Referenz gedacht ist. Der genaue Inhalt ist wie folgt

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nachahmung der Nachrichtenveröffentlichungsfunktion von Sina Weibo</title>
<style>
*{Margen: 0; Füllung: 0;}
#div1{Breite: 400px; Hoehe: 400px; Rand: 1px fest; Margen: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="Veröffentlichen" />
    <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 ist das perfekte Bewegungsrahmen, das ich geschrieben habe:

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;//假设所有值都已经到了
 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&63;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);
;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来自网络，版权归原创者所有，内容由互联网用户自发贡献并自行上传，本网站不拥有所有权，未进行人工编辑处理，也不承担相关法律责任。如果您发现涉嫌版权的内容，请发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）

Grundlegende Anleitung

Empfohlene Artikel