請(qǐng)問這個(gè)BUG是什么情況？謝謝
<!DOCTYPE?html>
<html>
<head>
<meta?charset="GB2312">
<title>json</title>
<style?type="text/css">
*?{
margin:?0;
padding:?0;
}
.lis?{
height:?260px;
width:?260px;
background-color:?antiquewhite;
border-radius:?60px;
margin-top:?10px;
line-height:?60px;
text-align:?center;
border:?5px?solid?cadetblue;
opacity:?0.5;
box-shadow:?5px?2px?10px?darkred;
}
</style>
<script?src="speed_flash/donghua.js"></script>
<script?type="text/javascript">
window.onload=function(){
var?oli=document.getElementById("lis");
oli.onmouseover=function(){
lis_over(oli,10,0,{width:400,height:460});
}
}
</script>
</head>
<body>
<ul?id=oul>
<li?class="lis"?id="lis">imooc</li>
</ul>
</body>
</html>function?lis_over(obj,?speed,?lg,?json,?fn)?{
obj.timer?=?null;
var?sp?=?10,
flag?=?true;
clearInterval(obj.timer);
obj.timer?=?setInterval(function()?{
for?(var?sty?in?json)?{
//樣式值處理
var?wd?=?window.getComputedStyle(obj,?null)[sty];
if?(sty?==?'opacity')?{
wd?=?Math.round(parseFloat(wd)?*?100)/100;
}?else?{
wd?=?parseInt(wd);
}
//判斷結(jié)束
if?(wd?!=?json[sty])?{
flag?=?false;
}
if?(flag)?{
clearInterval(obj.timer);
if?(fn)?{
fn();
}
}
//速度正負(fù)判斷
if?(lg?!=?0)?{
speed?=?-10;
}
//透明度
if?(sty?==?'opacity')?{
var?a?=?wd*100?+?speed;
obj.style[sty]?=?a?/?100;
}?else?{
obj.style[sty]?=?wd?+?speed?+?"px";
}
}
},?100)
}謝謝！我是希望能夠同時(shí)運(yùn)動(dòng)，然后等大家運(yùn)動(dòng)到達(dá)目的地才結(jié)束！
2016-07-05
抱歉啊，前面的回答，并沒有解決你的問題，又看了下代碼，發(fā)現(xiàn)問題就在 你把速度固定了，也就是當(dāng) width達(dá)到目標(biāo)值400的時(shí)候，而height此時(shí)400 并沒有達(dá)到目標(biāo)值，定時(shí)器不會(huì)停止，下一次 而width的值就變成了410，大于了width的目標(biāo)值400，而當(dāng) height達(dá)到目標(biāo)值時(shí)，width的值也在逐漸增大，早就超出了目標(biāo)值的400，這樣就永遠(yuǎn)不會(huì)停止了，也就是說除非 width同時(shí)達(dá)到目標(biāo)值，例如lis_over(oli,10,0,{width:400,height:400});否則都不會(huì)停止。這也是 老師在代碼中?var speed = (json[sty]-wd)/8;用目標(biāo)值 減去現(xiàn)在值，當(dāng)二者相同時(shí) speed就變成了0，不在增加或減少，等待其他 屬性 達(dá)到目標(biāo)值 速度變?yōu)?，就自然停止了
2016-07-05
function lis_over(obj, speed, lg, json, fn) {
? ? obj.timer = null;
? ? var sp = 10,
? ? ? ? flag = true;
? ? clearInterval(obj.timer);
? ? obj.timer = setInterval(function() {
? ? ? ? flag = true;
? ? ? ? for (var sty in json) {
? ? ? ? ? ? //樣式值處理
? ? ? ? ? ? var wd = window.getComputedStyle(obj, false)[sty];
? ? ? ? ? ? if (sty == 'opacity') {
? ? ? ? ? ? ? ? wd = Math.round(parseFloat(wd)*100);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? wd = parseInt(wd);
? ? ? ? ? ? }
? ? ? ? ? ? var speed = (json[sty]-wd)/8;
? ? ? ? ? ? speed = speed >0 ?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? //判斷結(jié)束
? ? ? ? ? ? //console.log('sty:'+sty+';wd:'+wd+';sty:'+json[sty]);
? ? ? ? ? ? if (wd != json[sty]) {
? ? ? ? ? ? ? ? console.log(flag);
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? }
? ? ? ? ? ? // 速度正負(fù)判斷
? ? ? ? ? ? if (lg != 0) {
? ? ? ? ? ? ? ? speed = -speed;
? ? ? ? ? ? }
? ? ? ? ? ? //透明度
? ? ? ? ? ? if (sty == 'opacity') {
? ? ? ? ? ? ? ? obj.style[sty] = (wd + speed) / 100;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? obj.style[sty] = wd + speed + "px";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // console.log(flag);
? ? ? ? if (flag) {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? if (fn) {
? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? }
? ? ? ? }
? ? }, 100)
}
2016-07-05
補(bǔ)充，要有 mouseout 事件，恢復(fù)原狀，不然 你這個(gè)東西，下次mouseover 觸發(fā) 又停止不了了
2016-07-05
把??flag?=?true; 放到 定時(shí)器 中，就可以了