div定时放大缩小

北慕城南 提交于 2019-11-26 17:03:08
<!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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!