JavaScript总结(七)--动画过渡效果

作者: 风的低语 | 来源:发表于2018-05-24 16:22 被阅读11次

JavaScript总结(七)--动画过渡效果
动画组件
CSS3之过渡
CSS3过渡动画
CSS3学习笔记（五）
CSS动画
在Vue中同时使用过渡和动画
Bootstrap 手册 07 - JS 组件篇
在Vue中使用css动画
过渡和动画

动画过渡.PNG

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #showImg{
                border: 1px solid black;
                height: 400px;
                                width:1500px;
                text-align: center;/*让showImg中的内容居中*/
            }
            #showImg img{
                vertical-align: middle;/*让图片居中*/
                transition: width .5s;/*宽度变换事件:0.5秒*/
            }
            #showImg:before{/*起到固定宽度的作用*/
                content: "";
                display: inline-block;
                vertical-align: middle;/*行内块级结构*/
                height: 400px;
            }
        </style>
        <script>
            window.onload=function(){
                var divShow=document.getElementById("showImg");
            divShow.onmouseover=function(){
                clearInterval(obj);
            }
            divShow.onmouseout=function(){
                clearInterval(obj);
                obj = setInterval(imgShow,500);
            }
            var imgs=document.getElementsByTagName("img");
            count=0;
            function imgShow(){
                for(var i=0;i<imgs.length;i++){
                    imgs[i].style="width:113px";
                }
                imgs[count].style="width:200px";
                count++;
                if(count==imgs.length){
                    count=0;
                }
            }
            var obj = setInterval(imgShow,500);
            }
        </script>
        
        
    </head>

    <body>
        <div id="showImg">
            <img src="haizeiwang/1.png" style="width: 200px;" />
            <img src="haizeiwang/2.png" style="width: 113px;" />
            <img src="haizeiwang/3.png" style="width: 113px;" />
            <img src="haizeiwang/4.png" style="width: 113px;" />
            <img src="haizeiwang/5.png" style="width: 113px;" />
            <img src="haizeiwang/6.png" style="width: 113px;" />
            <img src="haizeiwang/7.png" style="width: 113px;" />
            <img src="haizeiwang/8.png" style="width: 113px;" />
        </div>
        
    </body>

</html>