js运动实例-带运动效果的留言本

最新推荐文章于 2022-11-07 15:56:17 发布

della_uii

最新推荐文章于 2022-11-07 15:56:17 发布

阅读量435

点赞数

分类专栏： JavaScript 文章标签：运动留言本

本文链接：https://blog.csdn.net/Della_UI/article/details/53148151

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这里主要实现的是li高度和透明度的运动效果。
实现思路：先把li的高度和透明度初始化为0，然后运动至目的高度和透明度。
注意：li的高度在初始化为0之前要先存储。

另外本文用到的运动框架move.js，在前面已经给出。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                position: absolute;
                right: 10px;
                top: 8px;
                width: 700px;
                height: 500px;
                border: 1px solid #999;
                padding: 0 20px;
                overflow: hidden;
            }
            #ul1 li{
                line-height: 32px;
                border-bottom: 1px dotted #999;
                overflow: hidden; 
                /*注意这里要实现断行*/
                word-wrap: break-word;
                word-break: break-all;
            }
        </style>
        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oCont=document.getElementById("content");
                var oBtn=document.getElementById("btn");
                var oUl=document.getElementById("ul1");

                oBtn.onclick=function(){
                    var oLi=document.createElement('li');
                    oLi.innerHTML=oCont.value;

                    if (oUl.children[0]) {
                        oUl.insertBefore(oLi,oUl.children[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }

                    oCont.value='';

                    var iHeight=parseInt( css(oLi,'height') );//先把li的高度存起来，这里不能用oLi.offsetHeight和oLi.clientHeight，因为oLi.offsetHeight会包含border-bottom，而如果Li有padding值得话，oLi.clientHeight会包含padding值

                    //初始化：把li的高度和透明度都设置为0
                    oLi.style.height=0;
                    oLi.style.opacity = '0';
                    oLi.style.filter = 'alpha(opacity=0)';

                    //分别为高度和透明度加上运动效果
                    startMove(oLi,{
                        height:iHeight,
                        opacity:100
                    })
                }
            }
        </script>
    </head>
    <body>
        <textarea id="content" rows="10" cols="50"></textarea>
        <input id="btn" type="button" value="留言" />
        <ul id="ul1"></ul>
    </body>
</html>

della_uii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动实例-带运动效果的留言本

这里主要实现的是li高度和透明度的运动效果。实现思路：先把li的高度和透明度初始化为0，然后运动至目的高度和透明度。注意：li的高度在初始化为0之前要先存储。另外本文用到的运动框架move.js，在前面已经给出。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫