鼠標(biāo)放上去沒反應(yīng)
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
?? ?<style type="text/css">
?? ?*{
?? ??? ?margin: 0;
?? ??? ?padding: 0;
?? ?}
?? ?#div1{
?? ??? ?width: 200px;
?? ??? ?height: 300px;
?? ??? ?background-color: yellow;
?? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload = function(){
?? ??? ??? ?var div1 = document.getElementById("div1");
?? ??? ??? ?div1.onmouseover = function(){
?? ??? ??? ??? ?startMove(0);
?? ??? ??? ?}
?? ??? ??? ?div1.onmouseout = function(){
?? ??? ??? ??? ?startMove(-200);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?var timer = null;
?? ??? ?function startMove(itarget){
?? ??? ??? ?clearInterval(time);
?? ??? ??? ?var div1 = document.getElementById('div1');
?? ??? ??? ?timer = setInterval(function(){
?? ??? ??? ??? ?var speed = (itarget-div1.offsetLeft)/20;
?? ??? ??? ??? ?speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
?? ??? ??? ??? ?if(div1.offsetLeft == itarget){
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?div1.style.left = div1.offsetLeft + speed + 'px';
?? ??? ??? ??? ?}
?? ??? ??? ?}, 30)
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<div id="div1"></div>
?? ?
</body>
</html>
2016-06-21
首先,是clearInterval(timer)不是(time)。
其次,你的Div默認(rèn)left值就是0,startMove引入的目標(biāo)變量也是0,鼠標(biāo)移入時自然不會出現(xiàn)動畫,修改一下變量值。
當(dāng)然,最重要的是你的div沒有設(shè)置定位屬性。