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

透明度不會變化，別的可以變化,求幫忙看下

透明度不會變化，別的可以變化

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?body,ul,li{
????????????margin:?0;
?padding:?0;
?}
????????ul,li{
????????????list-style:?none;
?}
????????ul?li{
????????????width:?200px;
?height:?100px;
?background:?yellow;
?margin-bottom:?20px;
?border:5px?solid?black;
?}
????????ul?#li1{
????????????filter:alpha(opacity:30)?;
?opacity:0.3;
?}
????</style>
</head>
<body>
<ul>
????<li?id="li1"></li>
????<li?id="li2"></li>
</ul>
<script>
?window.onload=function?()?{
//????????var?list=document.getElementsByTagName('li')
//????????for?(var?i=0;i<list.length;i++){
//????????????list[i].times=null;
//????????????list[i].onmouseover=function?()?{
//????????????????startMove(this,400);
//????????????}
//????????????list[i].onmouseout=function?()?{
//????????????????startMove(this,200);
//????????????}
//????????}
?var?li1=document.getElementById('li1');
?var?li2=document.getElementById('li2');
//????????li1.times=null;
//????????li2.times=null;
//????????li3.times=null;
?li1.onmouseover=function?()?{startMove(this,100,'opacity')}
????????li1.onmouseout=function?()?{startMove(this,30,'opacity')}
????????li2.onmouseover=function?()?{startMove(this,200,'height')}
????????li2.onmouseout=function?()?{startMove(this,100,'height')}
????}
????//var?times=null;
?function?startMove(obj,iTarget,sty){
????????clearInterval(obj.times);
?obj.times=setInterval(function?()?{
????????????var?icur=0;
?if(sty=='opacity'){
????????????icur=Math.round(parseFloat(getStyle(obj,sty)))*100;
?}
????????????else?{icur=parseInt(getStyle(obj,sty))}
????????????var?speed=(iTarget-icur)/10;
?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?if(icur==iTarget){
????????????????clearInterval(obj.times);
?}
????????????else{
????????????????if(sty=='opacity'){
????????????????????odiv.style.filter='alpha(opacity:'+icur+speed+')';
?odiv.style.opacity=(icur+speed)/100;
?}
????????????????else{obj.style[sty]=icur+speed+'px';}
????????????}
????????},15)
????}
????function?getStyle(obj,sty)?{??//獲取樣式
?if(obj.currentStyle){
????????????return?obj.currentStyle[sty];???//IE下的
?}
????????else?{return?getComputedStyle(obj,false)[sty]}//火狐下的
?}

</script>
</body>
</html>

jokerchan4353390

2016-11-25

源自：JS動畫效果 4-4

關注問題我要回答

940

操作

收起

2 回答

BIN_GOD
2017-04-28

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>JS動畫</title>
? ?<style>
? ? ? ?body,ul,li{
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?padding: 0;
? ? ? ?}
? ? ? ?ul,li{
? ? ? ? ? ?list-style: none;
? ? ? ?}
? ? ? ?ul li{
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?background: yellow;
? ? ? ? ? ?margin-bottom: 20px;
? ? ? ? ? ?border:5px solid black;
? ? ? ?}
? ? ? ?ul #li1{
? ? ? ? ? ?filter:alpha(opacity:30) ;
? ? ? ? ? ?opacity:0.3;
? ? ? ?}
? ?</style>
</head>
<body>
<ul>
? ?<li id="li1"></li>
? ?<li id="li2"></li>
</ul>
<script>
? ?window.onload=function () {
// ? ? ? ?var list=document.getElementsByTagName('li')
// ? ? ? ?for (var i=0;i<list.length;i++){
// ? ? ? ? ? ?list[i].times=null;
// ? ? ? ? ? ?list[i].onmouseover=function () {
// ? ? ? ? ? ? ? ?startMove(this,400);
// ? ? ? ? ? ?}
// ? ? ? ? ? ?list[i].onmouseout=function () {
// ? ? ? ? ? ? ? ?startMove(this,200);
// ? ? ? ? ? ?}
// ? ? ? ?}
var li1=document.getElementById('li1');
? ? ? ?var li2=document.getElementById('li2');
// ? ? ? ?li1.times=null;
// ? ? ? ?li2.times=null;
// ? ? ? ?li3.times=null;
li1.onmouseover=function () {startMove(this,100,'opacity')}
? ? ? ?li1.onmouseout=function () {startMove(this,30,'opacity')}
? ? ? ?li2.onmouseover=function () {startMove(this,200,'height')}
? ? ? ?li2.onmouseout=function () {startMove(this,100,'height')}
? ?}
? ?//var times=null;
function startMove(obj,iTarget,sty){
? ? ? ?clearInterval(obj.times);
? ? ? ?obj.times=setInterval(function () {
? ? ? ? ? ?var icur=0;
? ? ? ? ? ?if(sty=='opacity'){
? ? ? ? ? ? ? ?icur=Math.round(parseFloat(getStyle(obj,sty))*100);

? ? ? ? ? ?}
? ? ? ? ? ?else {icur=parseInt(getStyle(obj,sty))}
? ? ? ? ? ?var speed=(iTarget-icur)/10;
? ? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ?if(icur==iTarget){
? ? ? ? ? ? ? ?clearInterval(obj.times);
? ? ? ? ? ?}
? ? ? ? ? ?else{
? ? ? ? ? ? ? ?if(sty=='opacity'){
? ? ? ? ? ? ? ? ? ?obj.style.filter='alpha(opacity:'+icur+speed+')';
? ? ? ? ? ? ? ? ? ?obj.style['opacity']=(icur+speed)/100;
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?else{
? ? ? ? ? ? ? ? ? ?obj.style[sty]=icur+speed+'px';}
? ? ? ? ? ?}
? ? ? ?},30)
? ?}
? ?function getStyle(obj,sty) { ?//獲取樣式
if(obj.currentStyle){
? ? ? ? ? ?return obj.currentStyle[sty]; ? //IE下的
}
? ? ? ?else {return getComputedStyle(obj,false)[sty]}//火狐下的
}

</script>
</body>
</html>