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

11111

<!DOCTYPE html>

<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>分享</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?* {
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?#div1 {
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?background-color: red;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?left: -200px;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?#div1 span {
?? ??? ??? ??? ?width: 20px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background-color: blue;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?left: 200px;
?? ??? ??? ??? ?top: 75px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?window.onload = function() {
?? ??? ??? ??? ?var oDiv = document.getElementById("div1"); //oDiv是局部變量，只在此函數(shù)內(nèi)有效
?? ??? ??? ?//鼠標(biāo)移入事件
?? ??? ??? ??? ?oDiv.onmouseover = function() {
?? ??? ??? ??? ??? ?starMove(0);
?? ??? ??? ?}
?? ??? ??? ??? ?//鼠標(biāo)移出事件
?? ??? ??? ??? ?oDiv.onmouseout = function() {
?? ??? ??? ??? ??? ?starMove(-200);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?var timer = null;
?? ??? ??? ??? ?function starMove(target) {
?? ??? ??? ??? ??? ?clearInterval(timer);//解決“speed”的疊加問題
?? ??? ??? ??? ??? ?var oDiv = document.getElementById("div1");
?? ??? ??? ??? ??? ?//創(chuàng)建一個定時器timer
?? ??? ??? ??? ??? ?timer = setInterval(function() {
?? ??? ??? ??? ??? ??? ?var speed = (target-oDiv.offsetLeft)/20;
?? ??? ??? ??? ??? ??? ?speed = speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ??? ??? ?if(oDiv.offsetLeft == target) {
?? ??? ??? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ??? ??? ??? ?//符合條件運(yùn)動停止
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?oDiv.style.left = oDiv.offsetLeft + speed + 'px';
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}, 30);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id=div1>
?? ??? ?<span>分享</span>
?? ??? ?</div>

?? ?</body>

</html>