按钮(链接)的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>