تحقيق وظيفة إصدار رسائل Weibo باستخدام JS

هذا المثال يشارك لكم رمز إصدار رسائل سناب تشات المقلدة، للاستعانة به، والمحتوى التفصيلي كالتالي

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ميزة إصدار رسائل سناب تشات المقلدة</title>
<style>
*{margin: 0; padding: 0;}
#div1{width: 400px; height: 400px; border: 1px solid; margin: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="btn1" value="发布" />
    <div id="div1">
    <ul id="ul1"></ul>
    </div>
<script>
var oUl=document.getElementById('ul1');
var oTxt1=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
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 هو إطار العمل الرائع الذي كتبته من قبل:

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?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 (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وقدموا الأدلة ذات الصلة، وسنقوم بإزالة المحتوى المزعوم عن حقوق النسخ فور التحقق من ذلك.

دليل الأساسيات

أنت قد تعجبك