zoukankan      html  css  js  c++  java
  • javascript学习之运动框架

    模仿新浪博客首页的,最新评论:

     1 <!DOCTYPE HTML>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7         *{margin:0; padding: 0;}
     8         #ul1{width: 300px; height: 300px; border:1px solid #000; margin:0 auto;}
     9         #ul1 div{list-style: none; border-bottom:1px dashed #000;padding: 2px;overflow: hidden;filter:alpha(opacity:0);opacity: 0;}
    10         </style>
    11         <script type="text/javascript" src="move.js"></script>
    12         <script type="text/javascript">
    13         window.onload = function(){
    14             var oArea = document.getElementById("area");
    15             var oBtn = document.getElementById("btn1");
    16             var oUl = document.getElementById("ul1");
    17             oBtn.onclick = function(){
    18                 var oLi = document.createElement("div");//创建内部Div
    19                 var aLi = oUl.getElementsByTagName('div');
    20                 oLi.innerHTML = oArea.value;
    21                 oArea.value = "";//点击发布后清空textarea
    22                 if(aLi.length){//如果内部已经有评论,那么就插入在第一个,否则就直接放在大的Div中
    23                     oUl.insertBefore(oLi,aLi[0]);
    24                 }else{
    25                     oUl.appendChild(oLi);
    26                 }
    27                 var iHeight = oLi.offsetHeight;//计算回复Div的高
    28                 oLi.style.height = 0;//将Div的高设置为0,完成下面的动画
    29                 startMove(oLi,{height:iHeight},function(){
    30                     startMove(oLi,{opacity:100});
    31                 });
    32             }
    33         };
    34  function startMove(obj,json,fn){
    35     clearInterval(obj.timer);
    36     obj.timer = setInterval(function(){
    37         for(var attr in json){
    38             var iCur = 0;
    39             if(attr == "opacity"){
    40                 iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
    41             }else{
    42                 iCur = parseFloat(getStyle(obj,attr));
    43             }
    44             var iSpeed = (json[attr]-iCur)/8;
    45             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) :Math.floor(iSpeed);
    46             if(json[attr] == iCur){
    47                 clearInterval(obj.timer);
    48                 if(fn){
    49                     fn();
    50                 }
    51             }else{
    52                 if(attr == "opacity"){
    53                     obj.style.filter = 'filter:alpha(opacity:'+(iCur+iSpeed)+')';
    54                     obj.style.opacity = (iCur+iSpeed)/100;
    55                 }else{
    56                     obj.style[attr] = iCur+iSpeed+"px";
    57                 }
    58             }
    59         }
    60     },30);
    61 }
    62 function getStyle(obj,attr){
    63     if(obj.currentStyle){
    64         return obj.currentStyle[attr];
    65     }else{
    66         return getComputedStyle(obj,false)[attr];
    67     }
    68 }
    69         </script>
    70     </head>
    71     <body>
    72         <textarea rows="10" cols="40" id="area"></textarea>
    73         <input type="button" value="发布" id="btn1">
    74         <div id="ul1">
    75         </div>
    76     </body>
    77 </html>
    View Code

    菜鸟一个,大神路过就Ok了~~~

  • 相关阅读:
    tile38 复制配置
    The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS
    tile38 一款开源的geo 数据库
    sqler sql 转rest api 的docker 镜像构建(续)使用源码编译
    sqler sql 转rest api javascript 试用
    sqler sql 转rest api redis 接口使用
    sqler sql 转rest api 的docker image
    sqler sql 转rest api 的工具试用
    apache geode 试用
    benthos v1 的一些新功能
  • 原文地址:https://www.cnblogs.com/yuexin/p/3481559.html
Copyright © 2011-2022 走看看