美文网首页
JavaScript总结(七)--动画过渡效果

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

作者: 风的低语 | 来源:发表于2018-05-24 16:22 被阅读11次
    动画过渡.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>
    

    相关文章

      网友评论

          本文标题:JavaScript总结(七)--动画过渡效果

          本文链接:https://www.haomeiwen.com/subject/eaqnuxtx.html