哪里錯(cuò)了???動(dòng)不起來
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTest</title>
<style type="text/css">
body, div, span {
?? ?margin: 0;
?? ?padding: 0;
}
#div1 {
?? ?width: 200px;
?? ?height: 200px;
?? ?background: red;
?? ?position: relative;
?? ?left: -200px;
?? ?top: 0;
}
#div1 span {
?? ?width: 20px;
?? ?height: 50px;
?? ?background: blue;
?? ?position: absolute;
?? ?left: 200px;
?? ?top: 75px;
}
</style>
<script type="text/javascript">
?? ?window.onload = function() {
?? ??? ?var oDiv = document.getElementById("div1");
?? ??? ?oDiv.onmouseover = function() {
?? ??? ??? ?startMove(0);
?? ??? ?}
?? ??? ?oDiv.onmouseover = function() {
?? ??? ??? ?startMove(-200);
?? ??? ?}
?? ?}
?? ?var timer = null;
?? ?function startMove(iTarget) {
?? ??? ?clearInterval(timer);
?? ??? ?var oDiv = document.getElementById("div1");
?? ??? ?timer = setInterval(function() {
?? ??? ??? ?var speed = 0;
?? ??? ??? ?if (oDiv.offsetLeft > iTarget) {
?? ??? ??? ??? ?speed = -10;
?? ??? ??? ?} else {
?? ??? ??? ??? ?speed = 10;
?? ??? ??? ?}
?? ??? ??? ?if (oDiv.offsetLeft == iTarget) {
?? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ?} else {
?? ??? ??? ??? ?oDiv.style.left = oDiv.offsetLeft + speed + "px";
?? ??? ??? ?}
?? ??? ?}, 30);
?? ?}
</script>
</head>
<body>
?? ?<div id="div1">
?? ??? ?<span id="share">分享</span>
?? ?</div>
</body>
</html>
2017-09-08
把?startMove(-200);的方法換成onmouseout
2017-09-08
......兩個(gè)鼠標(biāo)移入事件