我要疯了！！！求大神啊！！！为什么鼠标移到上面只触发第一个startMove在移上面一次才出发那里面的第二个startMove
fluent
2015-08-04 22:11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getStyle(obj, attr) {
if(obj.currenStyle){
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
for(var attr in json)
{
//1.取当前值
var icur = 0;
if(attr=='opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//当前透明度
}
else{
icur = parseInt(getStyle(obj,attr));
}
//2.算速度
obj.speed = (json[attr]-icur)/8;
obj.speed = obj.speed>0?Math.ceil(obj.speed):Math.floor(obj.speed);
//3.检测停止
if(json[attr]!=icur) {
flag = false;
}
if(attr=='opacity'){
obj.style[attr] = (icur+obj.speed)/100;
}
else{
obj.style[attr] = icur + obj.speed + 'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
window.onload=function(){
var move = document.getElementById('move');
var a = move.getElementsByTagName('a');
for(var i = 0;i<a.length;i++){
a[i].onmouseover = function(){
var a_this = this.getElementsByTagName('img')[0];
startMove(a_this,{top:-10,opacity:0},function(){
a_this.style[top] = 20 +'px';
startMove(a_this,{top:10,opacity:100});
});
}
}
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
font-size:13px;
text-decoration:none;
}
#move{
margin:50px auto;
width:245px;
height:245px;
background-color:#eee;
}
#move a{
display:block;
width:55px;
height:75px;
position:relative;
margin-left:5px;
margin-top:5px;
border-radius:3px;
color:#000;
float:left;
background-color:#fff;
overflow:hidden;
}
#move a:hover{
color:#C60;
}
#move a img{
position:absolute;
top:10px;
left:12px;
display:block;
text-align:center;
opacity:1;
border:none;
}
#move a p {
display:block;
position:absolute;
top:50px;
left:12px;
margin-left:2px;
text-align:center;
}
</style>
</head>
<body>
<div id="move">
<a href="#"><img src="image/1.jpg" /><p>保险</p></a>
<a href="#"><img src="image/2.jpg" /><p>旅行</p></a>
<a href="#"><img src="image/3.jpg" /><p>游戏</p></a>
<a href="#"><img src="image/4.jpg" /><p>彩票</p></a>
<a href="#"><img src="image/5.jpg" /><p>电影</p></a>
<a href="#"><img src="image/6.jpg" /><p>点外卖</p></a>
<a href="#"><img src="image/7.jpg" /><p>理财</p></a>
<a href="#"><img src="image/8.jpg" /><p>找服务</p></a>
<a href="#"><img src="image/9.jpg" /><p>音乐</p></a>
<a href="#"><img src="image/10.jpg" /><p>水煤电</p></a>
<a href="#"><img src="image/11.jpg" /><p>火车票</p></a>
<a href="#"><img src="image/12.jpg" /><p>更多</p></a>
</div>
</body>
</html>
2回答
-
- arlenhui
- 2015-08-05 09:34:27
额。。。判断条件不对，你把flag定义在外面，而function作用域中把flag设为false，每次没有重置，把flag放进去就可以了。
obj.timer = setInterval(function() {
for(var attr in json)
{
//1.取当前值
var icur = 0;
var flag = true;
-
- 若忆浅搁
- 2016-03-24 20:03:45
谢谢前面的各位大神。。已解决！！
JS动画效果
113918 学习 · 1502 问题
相似问题