在最后完成move.js后,之前的不同步的效果不能用這個實現(xiàn)了呢?
在完成最后的這個move.js后,我將之前的順序改變效果的代碼改成了這樣,但是只能完成第一個效果,是不是相當(dāng)于已經(jīng)實現(xiàn)了到目標(biāo),后面的就不執(zhí)行了?怎么改呢?既能實現(xiàn)同步的也能實現(xiàn)不同步的?
Li.onmouseover = function(){
startMove(Li,{width:400},function(){
startMove(Li,{height:200},function(){
startMove(Li,{opacity:100});
});
});
}
2015-04-11
startMove(Li,{"width":400},function(){?????????這里的width要加雙引號。。。
2015-02-15
function moveStart(obj, json, fn) {
//json = {name:value}
//json要用for in 函數(shù)--->for(var i in json){ name==i; ?value == json[i] }
var flag = true; //假設(shè)所有運動都達(dá)到目標(biāo)值
clearInterval(obj.timer);
// var aLi = document.getElementsByTagName("li");
//obj是實參傳來的this,所以這里不再需要獲取對象
obj.timer = setInterval(function() {
//1、獲取值
for (var attr in json) {
var icren = 0;
if (attr == "opacity") {
icren = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icren = parseInt(getStyle(obj, attr));
} //2、計算速度
var speed = (json[attr] - icren) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3、判斷是否達(dá)到目標(biāo)
if (icren != json[attr]) {
// alert(flag);
flag = false;
// clearInterval(obj.timer);
}
else{
flag = true;
// alert(flag);
}
//for in 循環(huán)執(zhí)行json時,是將json的屬性全部遍歷結(jié)束之后跳出循環(huán)
//4、執(zhí)行計算
if (attr == "opacity") {
obj.style[attr] = (icren + speed) / 100;
obj.style[filter] = "alpha(opacity:" + (icren + speed) + ")";
} else {
obj.style[attr] = icren + speed + "px";
}
}
if (flag) {
alert("ok");
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
這樣就可以使用function(){}了,但是要是你傳入的obj的實參是this,function中不可以再傳入this,最好把this賦值給變量。以下是代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
width: 200px;
height: 100px;
background-color: goldenrod;
opacity: 0.3;
border: 2px solid black;
}
</style>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oLi = document.getElementsByTagName("li");
// alert(oLi.length);
for(var i = 0;i<oLi.length;i++){
// alert("test");
oLi[i].timer = null;
oLi[i].onmouseover = function(){
var test = this;
moveStart(test,{width:202,height:200}
// ?==========?
// ?= moveStar(this,...)中,this不可以用oLi[i]這個對象????=
// ?==========?
,function(){
moveStart(test,{opacity:100});
}
);
}
oLi[i].onmouseout = function(){
moveStart(this,{width:200,height:100});
}
}
}
</script>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
區(qū)域中的?號注釋塊是我也不太明白的地方,望高手解答
2015-02-15
是的,我也發(fā)現(xiàn)了,正在分析,是由于flag一直是false,無法進(jìn)入最后的判斷,對json了解不是很透徹。
2015-01-29
遇到同樣問題 求指教
2015-01-16
呵呵 學(xué)習(xí)了