                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

fn的透明度報錯并且沒有變化

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style>
? ? ? ?div{
? ? ? ? ? ?width: 100px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?background: blueviolet;
? ? ? ?}
? ?</style>
? ?<script src="startmove.js"></script>
? ?<script>
? ? ? ?window.onload=function () {
? ? ? ? ? ?var ax1=document.getElementsByTagName('div');
? ? ? ? ? ?for (var i=0;i<ax1.length;i++){
? ? ? ? ? ? ? ?ax1[i].onmouseover=function () {
? ? ? ? ? ? ? ? ? ?startMove(this,{width:200,height:200},function () {
? ? ? ? ? ? ? ? ? ? ? ?startMove(this,{opacity:30})
? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ?ax1[i].onmouseout=function () {
? ? ? ? ? ? ? ? ? ?startMove(this,{width:100,height:100})
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ?</script>
</head>
<body>
<div id="li"></div>
<div></div>
<div></div>
</body>
</html>

慕粉3173457

2016-05-13

源自：JS動畫效果 6-2

關注問題我要回答

734

操作

收起

2 回答

啊啊啊啊123
2016-07-15

<!DOCTYPE?html>
<html>
<head>
???<meta?charset="UTF-8">
???<title>Title</title>
???<style>
???????div{
???????????width:?100px;
???????????height:?100px;
???????????background:?blueviolet;
???????????margin-bottom:?20px;
???????}
???</style>
???<script>
???????window.onload=function?()?{
???????????var?ax1=document.getElementsByTagName('div');
???????????for?(var?i=0;i<ax1.length;i++){
???????????????ax1[i].onmouseover=function?()?{
????????????????var?_this?=?this;
???????????????????startMove(_this,{width:200,height:200},function?()?{
???????????????????????startMove(_this,{opacity:30})
???????????????????});
???????????????};
???????????????ax1[i].onmouseout=function?()?{
????????????????var?_this?=?this;
???????????????????startMove(_this,{width:100,height:100})
???????????????}
???????????}
???????}
???????function?startMove(obj,json,fn){
????clearInterval(obj.timer);
????obj.timer=setInterval(function?()?{
???????var?flg?=true;??//假設所有動作已經完成
???????for?(var?attr?in?json)?{
???????????//獲取當前值
???????????var?icur?=?0;
???????????if?(attr?==?'opacity')?{
???????????????icur?=?Math.round(parseFloat(getStyle(obj,?attr))?*?100);
???????????}
???????????else?{
???????????????icur?=?parseInt(getStyle(obj,?attr));
???????????}
???????????//算速度
???????????var?speed?=?0;
???????????speed?=?(json[attr]?-?icur)?/?8;
???????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
???????????//檢測停止
???????????if?(icur?!=?json[attr])?{
???????????????flg=false;
???????????}
???????????if?(attr?==?'opacity')?{
???????????????????//針對IE瀏覽器
???????????????????obj.style.filter?=?'alpha(opacity:'?+?(icur?+?speed)?+?')';
???????????????????//針對其他
???????????????????obj.style.opacity?=?(icur?+?speed)?/?100;
???????????????}
???????????????else?{
???????????????????obj.style[attr]?=?icur?+?speed?+?'px';
???????????????}
????????????}
???????if?(flg){
???????????clearInterval(obj.timer);
???????????if?(fn){
???????????????fn()
???????????}
???????}
???},30)
}
function?getStyle(obj,attr){
???if?(obj.currentStyle){
???????return?obj.currentStyle[attr];
???}
???else{
???????return?getComputedStyle(obj,false)[attr];
???}
}
???</script>
</head>
<body>
<div?id="li"></div>
<div></div>
<div></div>
</body>
</html>

其實還是this的問題

1 回復有任何疑惑可以回復我~

收起回答

zj5649799
2016-05-15

?? ? ?startMove(this,{width:200,height:200},function () {
? ? ? ? ? ? ? ? ? ? ? ?startMove(this,{opacity:30})你的這個不能這樣寫啊，要寫成?startMove(this,{width:200,height:200,opacity:30});傳參的時候json直接就完成了啊，最后一個是回調函數，不能這樣調用的！