關于多個li調用不成功？
就是這個老師不是剛開始吧多余的li都刪除了，我是在原來的基礎上做著個例子，發現第一次調用startMove就成功，第二次在設置高的startMove就失敗，沒有效果，？？？
3 回答
舉報
0/150
提交
取消
就是這個老師不是剛開始吧多余的li都刪除了，我是在原來的基礎上做著個例子，發現第一次調用startMove就成功，第二次在設置高的startMove就失敗，沒有效果，？？？
2018-06-21
舉報
2018-08-23
?對的,在調用startMove方法的第二遍的時候this 指代的不是當前這個li標簽了 稍微改一下就行 用一個指針存一下:
window.onload = function() {
var aLi = document.getElementsByTagName('li');
var _this;
for(var i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].onmouseover = function() {
console.log(this);
_this = this;
startMove(this, 'width', 400, function() {
console.log(this);
startMove(_this, 'height', 200, function() {
startMove(_this, 'opacity', 100);
});
});
}
aLi[i].onmouseout = function() {
_this = this;
startMove(this, 'opacity', 30, function() {
startMove(_this, 'height', 100, function() {
startMove(_this, 'width', 200);
});
});
}
}
}
2018-06-21
我覺得是this在第二遍傳值時出了問題，求教
2018-06-21
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>js鏈式動畫</title>
</head>
<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,'width',400,function(){
????????? ?startMove(this,'height',200,function(){
????????? ??startMove(this,'opacity',100);
????????? ?});
????????? });
??????? }
??????? aLi[i].onmouseout=function(){
????????? startMove(this,'opacity',30,function(){
????????? ?startMove(this,'height',100,function(){
????????? ??startMove(this,'width',200);
????????? ?});
????????? });
??????? }
??? }
? }
//var timer=null;
function startMove(obj,attr,iTarget,fn){
?? clearInterval(obj.timer);
?? obj.timer=setInterval(function(){
???? var icur=0;
???? if(attr=='opacity'){
???????? icur=Math.round(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);
??????? if(fn){
??????? ?fn();
??????? }
????? }else{
??????? if(attr=='opacity'){
?????????? obj.style.filter='alpha(opacity:'+(icur+speed)+')';
?????????? obj.style.opacity=(icur+speed)/100;
??????? }else{
??????????? 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>
<style>
?? ul ,li{
????? list-style:none;
?? }
?? ul li{
????? width:200px;
????? height:100px;
????? background:yellow;
????? margin-bottom:20px;
????? border: 4px solid #000;
????? filter: alpha(opacity:30);
????? opacity: 0.3;
?? }
</style>
<body>
?<ul>
?? <li id='li1'></li>
?? <li></li>
?? <li></li>
?
?</ul>
</body>
</html>