麻煩幫忙看下，我寫出來的代碼沒有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
ul li{width:200px;height:100px;background:yellow;opacity:0.3;filter:alpha(opacity:30);border: #ccc 4px solid;}
</style>
</head>
<script type="text/javascript" src="js/move.js" ></script>
<script>
window.onload = function(){
var oLi=document.getElementById('li1');
oLi.onmouseover = function(){
startMove=(oLi,{width:400,height:200,opacity:100});
}
oLi.onmouseout = function(){
startMove=(oLi,{width:200,height:100,opacity:30});
}
}
</script>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
2018-06-19
修改后的代碼:
<!DOCTYPE?html> <html> ?<head> ??<meta?charset="utf-8"?/> ??<title></title> ??<style?type="text/css"> ????*{margin:?0;?padding:?0;} ????ul,li{list-style:?none;} ????ul?li{width:200px;height:100px;background:yellow;opacity:0.3;filter:alpha(opacity:30);border:?#ccc?4px?solid;} ??</style> ?</head> ?<script?type="text/javascript"??> ??function?startMove(obj,?json,?fn)?{ ???clearInterval(obj.timer); ???obj.timer?=?setInterval(function()?{ ????var?flag?=?true; ????for(var?attr?in?json)?{ ?????//目標(biāo)值 ?????var?iCur?=?0; ?????if(attr?==?'opacity')?{ ??????iCur?=?Math.round(parseFloat(getStyle(obj,attr))?*?100); ?????}?else?{ ??????iCur?=?parseInt(getStyle(obj,attr)); ?????} ?????//speed ?????var?iSpeed?=?(json[attr]?-?iCur)?/?8; ?????iSpeed?=?iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); ?????//stop ?????if(iCur?!=?json[attr])?{ ??????flag?=?false; ?????} ?????if(attr?==?'opacity')?{ ??????obj.style.filter?=?'alpha(opacity:'+?(iCur?+?iSpeed)?+')'; ??????obj.style.opacity?=?(iCur?+?iSpeed)?/?100; ?????}?else?{ ??????obj.style[attr]?=?iCur?+?iSpeed?+?'px'; ?????} ????} ????if(flag){ ?????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> ? ?<script> ??window.onload?=?function(){ ???var?oLi=document.getElementById('li1'); ???oLi.onmouseover?=?function(){ ????startMove(oLi,{width:400,height:200,opacity:100}); ???} ???oLi.onmouseout?=?function(){ ????startMove(oLi,{width:200,height:100,opacity:30}); ???} ??} ?</script> ?<body> ??<ul> ???<li?id="li1"></li> ??</ul> ?</body> </html>2018-06-19
補充,你的另一些小錯誤:
代碼塊里
//你的代碼 if(iCur?==?json[attr]){flag=false}; //正確代碼 if(iCur?!=?json[attr]){flag=false};true寫成了ture.
startMove(a,b,c,d)寫成了startMove = (a,b,c,d)
還有一些沒有寫分號的錯誤,一行代碼應(yīng)該以括號或者分號結(jié)束.
2018-06-19
你的 flag代碼位置存在錯誤.
function(){ ????var?flag?=?true; ????for(i?in?json){ ????????//your?codes ????????if(flag){ ????????????clearInterval(obj.timer) ????????} ????} }正確的結(jié)構(gòu)應(yīng)該是:
1,設(shè)置flag.
2,for in循環(huán)你的代碼.
3,判斷flag
即如下:
function(){ ????flag?=?true ????for(i?in?json){ ????????//你的代碼 ????} ????if(flag){clearInterval(obj.timer)} }2018-06-13
function startMove(obj, json, fn) {
clearInterval(obj, timer);
obj.timer = setInterval(function() {
var flag = ture;
for(var attr in json) {
//目標(biāo)值
var iCur = 0;
if(attr == 'opacity') {
iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100);
} else {
iCur = parseInt(getStyle(obj,attr));
}
//speed
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//stop
if(iCur == json[attr]) {
flag = false;
}
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px'
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
}, 30)
}
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}