<!DOCTYPE?html>
<html>
<head>
????<title>透明度的getSyle方法的切換</title>
????<style?type="text/css">
????*{margin:?0;padding:?0;}
????????ul,li{list-style:?none;}
????????ul?li{
????????????width:?200px;
????????????height:?200px;
????????????background:?yellow;
????????????filter:?alpha(opacity:30);
????????????opacity:?0.3;
????????????}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????????var?ali=document.getElementsByTagName('li');
????????????ali.onmouseover=function(){
????????????????Move(this,100,'opacity');
????????????}
????????????ali.onmouseout=function(){
????????????????Move(this,30,'opacity');
????????????}
????????}
????????function?Move(obj,iTarget,attr){
????????????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=(iTarget-icur)/8;
????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????if(icur==iTarget){
????????????????????clearInterval(obj.timer);
????????????????}else{
????????????????????if(attr=='opacity'){
????????????????????????obj.style.filter='alpha(opacity:'+(icur+speed)+')';
????????????????????????obj.style.opacity=(icur+speed)/100;
????????????????????}ele{
????????????????????????obj.style[attr]=icur+speed+'px';
????????????????????}
????????????????}
????????????},30);
????????}
????????function?getStyle(obj,attr){
????????????if(obj.currentStyle){
????????????????return?obj.currentStyle[attr];
????????????}else{
????????????????return?getComputedStyle(obj,false)[attr];
????????????}
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
</ul>
</body>
</html>
2016-09-16
1.45行的else拼寫錯了
2.第20行的ali應該是一個數(shù)組,應該寫ali[0],或者通過for循環(huán)遍歷。
2016-09-25
?if(attr=='opacity'){
????????????????????????obj.style.filter='alpha(opacity:'+(icur+speed)+')';
????????????????????????obj.style.opacity=(icur+speed)/100;
????????????????????}ele{
????????????????????????obj.style[attr]=icur+speed+'px';
少兩個else 少了個s
2016-09-16
(1)ele{
????????????????????????obj.style[attr]=icur+speed+'px';
????????????????????}
else少了個s;
(2)getElementsByTagName('li')獲取到的是li的數(shù)組,使用ali[0]調(diào)用函數(shù)才行