链接图片来回飘动html

忘是亡心i 2022-05-27 13:18 222阅读 0赞

按钮（链接）的css文件butcss,css：

#but1{
        position: absolute;
        left:400px;
        top: 200px;
    }#but2{
         position: absolute;
         left: 200px;
         top:200px;
     }

html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="butcss.css">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            but1y=50;
            but1_m=4;
            function changePos() {
                function the_but() {
                    if (but1_m >= 4) {
                        but1y--;
                        if (but1y <= 0)
                            but1_m = 1;
                    }
                    if (but1_m <= 2) {
                        but1y++;
                        if (but1y >= 50)
                            but1_m = 4;
                    }
                    return but1y;
                }
                //jquery写法（需要引用jquery库）：
                  $("#but1").css('top',the_but()+200);
                $("#but2").css('left',the_but()+200);
                //document写法:
              //  document.getElementById("but1").style.top=the_but()+300+'px';
                // document.getElementById("but2").style.left=the_but+300+'px';
            }
            function start() {
                interval = setInterval(changePos, 100);
            }
            function stop() {
                clearInterval(interval);
            }
            start();
        </script>
    </head>
    <body bgcolor="#a9a9a9">
    <a id="but1" href="#" οnmοuseοver="stop()" οnmοuseleave="start()"><img src="xiangce.png"> </a>
    <a id="but2" href="#" οnmοuseοver="stop()"  οnmοuseleave="start()"><img src="shipin.png"></a>
    </body>
    </html>