                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

鼠標放上去沒反應(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>