20191031094252.jpg

代码实例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{
            width: 60px;
            height: 80px;
            transform:rotate(700deg);
        }
    </style>
    <script src="http://blog.fqidc.cn/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8">  </script>
</head>
<body>
    <div id="box" style="width: 120px; height: 120px; background-color: palevioletred;"></div>
    <img src="img/Chrysanthemum.jpg"/>
    <img src="img/Desert.jpg"/>
    <img src="img/Hydrangeas.jpg"/>
    <img src="img/Jellyfish.jpg"/>
    <img src="img/Koala.jpg"/>
    <img src="img/Lighthouse.jpg"/>
    <img src="img/Penguins.jpg"/>
    <img src="img/Tulips.jpg"/>
    <script type="text/javascript" >
        
        $(function(){
            $("img").animate({
                "float":"left",
                "margin-left":"500px",
            },parseInt(Math.random()*10000))
        });
        $(function(){
            $("img").animate({
                "margin-left":"0px",
            },parseInt(Math.random()*10000))
        });

// setTimeout(function(){
// window.location.href = '' ;
// },10000) 页面自动刷新

        
        $(function(){
            $("#box").animate({
                "margin-left":"500px",
            },parseInt(Math.random()*10000))
        });
        $(function(){
            $("#box").animate({
                "margin-left":"0px",
                "backgroundColor":"red"
            },parseInt(Math.random()*10000))
        });
    </script>
</body>