您的位置：首页 > Web前端 > JavaScript

HTML+CSS+JS实现速度动画

2017-11-04 14:33 579 查看

1.box.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告</title>
<link rel="stylesheet" type="text/css" href="box.css"/>
<script src="box.js"></script>
</head>

<body>
<div id="box">
<span id="smallbox"></span>
</div>
</body>

</html>

2.box.css代码：

body {
padding: 0px;
margin: 0px;
}

#box {
height: 200px;
width: 200px;
background-color: rebeccapurple;
position: relative;
-webkit-border-radius: 5%;
-moz-border-radius: 5%;
border-radius: 5%;
left: -200px;
}

#smallbox {
height: 50px;
width: 20px;
position: absolute;
background-color: dodgerblue;
-webkit-border-radius: 5%;
-moz-border-radius: 5%;
border-radius: 5%;
left: 200px;
top: 75px;
}

3.box.js代码：

window.onload = function () {
var box = document.getElementById('box');
box.onmouseover = function () {
move(10, 0);
}
box.onmouseout = function () {
move(-10, -200);
}
};

var timer = null;

function move(speed, destination) {
clearInterval(timer);
var box = document.getElementById('box');
timer = setInterval(function () {
if (box.offsetLeft == destination) {
clearInterval(timer);
} else {
box.style.left = box.offsetLeft + speed + 'px';
}
}, 30);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航