js仿新浪微博消息發(fā)布功能

更新時(shí)間：2017年02月17日 16:30:03 作者：jingtian678

這篇文章主要為大家詳細(xì)介紹了js仿新浪微博消息發(fā)布功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js仿新浪微博消息發(fā)布的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿新浪微博消息發(fā)布功能</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="發(fā)布" />
    <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為之前寫(xiě)的完美運(yùn)動(dòng)框架：

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;//假設(shè)所有值都已經(jīng)到了
 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);
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)
下面小編就為大家?guī)?lái)一篇封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
JavaScript使用pop方法移除數(shù)組最后一個(gè)元素用法實(shí)例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個(gè)元素,實(shí)例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下
2015-04-04
JavaScript窗口功能指南之在窗口中書(shū)寫(xiě)內(nèi)容
JavaScript窗口功能指南之在窗口中書(shū)寫(xiě)內(nèi)容...
2006-07-07
微信小程序?qū)崿F(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript ES6常用基礎(chǔ)知識(shí)總結(jié)
ES6中為我們提供了很多好用的新特性,其中包括let,箭頭函數(shù)以及擴(kuò)展運(yùn)算符…等，以下就是總結(jié)的常用基礎(chǔ)知識(shí)
2019-02-02
js?實(shí)現(xiàn)picker?選擇器示例詳解
這篇文章主要為大家介紹了js?實(shí)現(xiàn)picker?選擇器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼
這篇文章主要為大家詳細(xì)介紹了JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Javascript ES6中對(duì)象類(lèi)型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
js Date自定義函數(shù) 延遲腳本執(zhí)行
下面的原理是利用時(shí)間差的原理實(shí)現(xiàn)腳本的延遲執(zhí)行，是個(gè)思路，需要的朋友可以參考下。
2010-03-03