问下最后一个fn方法怎么实现不了，还报错
慕粉3116392
2016-11-16 23:12
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动态</title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
}
li{
list-style:none;
width:200px;
height:100px;
display:block;
background-color:#0f0;
margin-top:20px;
border:2px solid #f00;
font-size:14px;
opacity:0.3;
filter:alpha(opacity:30);
}
</style>
</head>
<body>
<ul>
<li>fontsize</li>
<li>fontsize</li>
<li>fontsize</li>
</ul>
<script>
window.onload = function(){
var oLi = document.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].timer =null;
oLi[i].onmouseover = function(){
var g =this;
starMouse(this,{width:400,opacity:100},function(){
starMouse(this,{color:#f00})
});
}
oLi[i].onmouseout =function(){
starMouse(this,{width:200,opacity:30});
}
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function starMouse(obj,json,fn){
var flag =true;
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function(){
for(var attr in json){
if(attr=="opacity"){
icur = Math.round(parseFloat(getStyle(obj,attr)*100));
}else{
icur =parseInt(getStyle(obj,attr));
}
var pend = (json[attr]-icur)/8;
pend = pend>0?Math.ceil(pend):Math.floor(pend);
if(icur!=json[attr]){
flag=false;
}
if(attr=="opacity"){
obj.style.filter ='alpha(opacity:'+(icur+pend)+')';
obj.style.opacity=(icur+pend)/100;
}else{
obj.style[attr] = parseInt(getStyle(obj,attr))+pend+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
</script>
</body>
</html>
2回答
-
- ZornKAXA
- 2016-11-19 16:43:43
function starMouse(obj,json,fn){
var flag =true; -------------------这句代码换个位置
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function(){
for(var attr in json){
-------------------如下
function starMouse(obj,json,fn){
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function(){
var flag =true;
for(var attr in json){
这次我考下来试了一下。
还是2个问题，
一，颜色值不能通过这个函数改变，你这里可以改成“height”试试
二，就是上面 var flag =true; 这句代码要放到定时器内部去调用。放在外面的的话定时器执行一次之后flag就变成false不会再改变了，放在定时器里面的话每次运行都会重新赋值一次flag。
最后，共同进步~
-
- ZornKAXA
- 2016-11-17 13:16:52
1，你第二次要改的是颜色，颜色这个东西既不是带px值的又不是变更透明值《attr=="opacity"》是不能用这个运动函数改变；
2，第一个this是指代成功的，第二个this的时候这个this就不是第一个this了，你要用你申明的g来代替第二个this。
JS动画效果
113925 学习 · 1443 问题
相似问题