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

大神指點下

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style type="text/css">
? ? ? ?* {
? ? ? ? ? ?margin:0 ;
? ? ? ? ? ?padding:0;
? ? ? ?}
? ? ? ?ul{
? ? ? ? ? ?list-style: none;
? ? ? ?}
? ? ? ?ul li{
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?background: #ffff00;
? ? ? ? ? ?margin-bottom: 20px;
? ? ? ?}
? ?</style>
? ?<script type="text/javascript">
? ? ? ?window.onload=function(){
? ? ? ? ? ?var Li1=document.getElementById('li1');
? ? ? ? ? ?var Li2=document.getElementById('li2');
? ? ? ? ? ?Li1.onmouseover=function () {
? ? ? ? ? ? ? ?startMove(this,'height',400);
? ? ? ? ? ?}
? ? ? ? ? ?Li1.onmouseout=function () {
? ? ? ? ? ? ? ?startMove(this,'height', 100);
? ? ? ? ? ?}
? ? ? ? ? ?Li2.onmouseover=function () {
? ? ? ? ? ? ? ?startMove1(this,'width',400);
? ? ? ? ? ?}
? ? ? ? ? ?Li2.onmouseout=function () {
? ? ? ? ? ? ? ?startMove1(this, 'width',200);
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?function getStyle(obj,attr){
? ? ? ? ? ?if(obj.currentStyle){
? ? ? ? ? ? ? ?return ?obj.currentStyle[attr];
? ? ? ? ? ?}
? ? ? ? ? ?else{
? ? ? ? ? ? ? ?return ?getComputedStyle(obj,false)[attr];
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?var timer=null;
? ? ? ?function startMove(obj,attr,target) {
? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ?obj.timer=setInterval(function (){
? ? ? ? ? ? ? ?var icu=parseInt(getStyle(obj,'[attr]'));
? ? ? ? ? ? ? ?var speed=(target-icu)/8;
? ? ? ? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? ? ?if (target==icu){
? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ?obj.style[attr]=icu+speed+'px';
? ? ? ? ? ? ? ?}
? ? ? ? ? ?} ,30)
? ? ? ?}
? ?</script>

</head>

<body>

<ul>
? ?<li id="li1"></li>
? ?<li id="li2"></li>
</ul>

</body>
</html>