div定时放大缩小

时间:2019-08-09
本文章向大家介绍div定时放大缩小,主要包括div定时放大缩小使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<style> 
.anim{
    width: 100px;
    height: 100px;
    background-color: red;
}
.anim-show
{
    transition: 0.7s;
    transform:translate(100px,100px) scale(1.5);
}
.anim-show1
{
    transition: 0.7s;
    transform:translate(100px,100px) scale(1);
}

</style>
</head>
<body>
    <div id="a" class="anim anim-show1"></div>
    
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script>


        var i = 0;

        var int=self.setInterval("clock()",700);
        
        function clock(){
            i++;

            if(parseInt(i/2) == i/2){
                $("#a").addClass("anim-show");
                $("#a").removeClass("anim-show1");
            }else{
                $("#a").removeClass("anim-show");
                $("#a").addClass("anim-show1");
            }
        }
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/junyi-bk/p/11328114.html