按钮(链接)的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="#" onmouseover="stop()" onmouseleave="start()"><img src="xiangce.png"> </a> <a id="but2" href="#" onmouseover="stop()" onmouseleave="start()"><img src="shipin.png"></a> </body> </html>