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

透明度改變不了，提示currentStyle沒有定義

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style>
? ? ? ?ul,li{
? ? ? ? ? ?list-style: none;
? ? ? ?}
? ? ? ?li{
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height:100px;
? ? ? ? ? ?background: yellow;
? ? ? ? ? ?margin-bottom: 20px;
? ? ? ? ? ?border:1px solid black;
? ? ? ? ? ?filter:alpha(opacity:30);
? ? ? ? ? ?opacity:0.3 ;
? ? ? ?}
? ?</style>
? ?<script>
? ? ? ?window.onload=function () {
// ? ? ? ? ? ?var ali=document.getElementsByTagName('li');
// ? ? ? ? ? ?for(var i=0;i<ali.length;i++){
// ? ? ? ? ? ? ? ?ali[i].timer=null;//各自加一個定時器
// ? ? ? ? ? ? ? ?ali[i].onmouseover=function () {
// ? ? ? ? ? ? ? ? ? ?startmove(this,'height',300);
// ? ? ? ? ? ? ? ?}
// ? ? ? ? ? ? ? ?ali[i].onmouseout=function () {
// ? ? ? ? ? ? ? ? ? ?startmove(this, 'height', 100);
// ? ? ? ? ? ? ? ?}
// ? ? ? ? ? ?}
var li1=document.getElementById('li1');
? ? ? ? ? ?var li2=document.getElementById('li2');
? ? ? ? ? ?li1.onmouseover=function () {
? ? ? ? ? ? ? ?startmove(this,'opacity',100);
? ? ? ? ? ?}
? ? ? ? ? ?li1.onmouseout=function () {
? ? ? ? ? ? ? ?startmove(this,'opacity',30);
? ? ? ? ? ?}
? ? ? ? ? ?li2.onmouseover=function () {
? ? ? ? ? ? ? ?startmove(this,'width',300);
? ? ? ? ? ?}
? ? ? ? ? ?li2.onmouseout=function () {
? ? ? ? ? ? ? ?startmove(this,'width',100);
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?//var timer=null;
function getStyle(obj,attr){
? ? ? ? ? ?if(obj.currentStyle){
? ? ? ? ? ? ? ?return obj.currentStyle[attr];
? ? ? ? ? ?}
? ? ? ? ? ?else{
? ? ? ? ? ? ? ?return getComputedStyle(obj,false)[attr];
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?var alpha=30;
? ? ? ?function ?startmove(obj,attr,target) {
? ? ? ? ? ?//clearInterval(timer)清空的是共同的定時器，沒有清空各自的定時器
clearInterval(obj.timer);
? ? ? ? ? ?obj.timer=setInterval(function () {
? ? ? ? ? ? ? ?var icur=0;
? ? ? ? ? ? ? ?if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ?icur=parseFloat(getStyle(obj.attr))*100;
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ?icur=parseInt(getStyle(obj,attr));
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?var speed=(target-icur)/8;
? ? ? ? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? ? ?if(icur==target){
? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?else{
? ? ? ? ? ? ? ? ? ?if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ? ? ?obj.style.filter='alpha(opacity:'+(icur+speed)+')';
? ? ? ? ? ? ? ? ? ? ? ?obj.style.opacity=(icur+speed)/100;
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?else {
? ? ? ? ? ? ? ? ? ? ? ?obj.style[attr] = icur + speed + 'px';
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?},50)
? ? ? ?}
? ?</script>
</head>
<body>

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

</ul>
</html>