js仿新浪微博消息发布功能

最新推荐文章于 2021-03-10 15:15:22 发布

周杰伦演唱会

最新推荐文章于 2021-03-10 15:15:22 发布

阅读量923

点赞数

分类专栏：微博发布系统

微博发布系统专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 
  <!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); 
     
      };