为什么我的鼠标移入后变透明后没有再显示，而是鼠标移开后才显示图片啊？？
慕设计5355172
2016-09-15 20:31
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
//display:inline;行内块元素,许多块级元素从左往右依次排列
//display:block;块级元素，占据整行
*{
margin:0;
padding:0;
}
#main{
width:692px;
height:500px;
margin:0 auto;
background: #eee;
}
#main a{
display: inline-block;
width: 200px;
height: 190px;
position: relative;
overflow: hidden;
border: 2px solid #ccc;
border-radius: 4px;
margin:10px;
padding:20px 0 5px;
text-align: center;
line-height: 30px;
text-decoration: none;
color:#000;
}
#main a i{
display: inline-block;
position: absolute;
top: 20px;
left: 20px;
opacity: 1;
filter: alpha(opacity=100);
}
#main a p{
display: block;
position: absolute;
top: 160px;
left: 62px;
}
#main a:hover{
color:red;
}
img{
display: inline-block;
width: 150px;
height: 150px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//<a>的href具有将鼠标变点击手型的功能
//鼠标事件要使用this传递参数
//使用层层递进，不要一下就访问到子元素<i>
var oDiv=document.getElementById("main");
var aList=oDiv.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){
var athis=this.getElementsByTagName("i")[0];
startMove(athis,{opacity:0,top:-20},function(){
athis.style.top=40+"px";
startMove(athis,{opacity:100,top:20})
});
};
}
function startMove(obj,json,fn){//fn此处表示一个函数，前面执行完毕后立刻调用一个函数
var flag=true;//假设所有目标值到达了终点。宽度高度透明度是否达到了目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var shuxing in json){//遍历json这个里面的属性与目标值
var str=0;
//用if判断属性
if(shuxing=='opacity'){
var str=Math.round(parseFloat(getStyle(obj,shuxing))*100);
//由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入
}else{
str=parseInt(getStyle(obj,shuxing));
}
//算速度
var speed=(json[shuxing]-str)/10;//缓冲运动的设置
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止
if(str!==json[shuxing]){
flag=false;//如果不是所有的目标值到达了最终点，则继续执行
//再用if判断属性
if(shuxing=='opacity'){
obj.style.opacity=(str+speed)/100;
obj.style.filter="alpha(opacity:'+(icur+speed)+')";//兼容IE浏览器
}else{
obj.style[shuxing]=str+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){//判断是否还有回调函数，如果有，继续执行
fn();
}
}
}
},30)//每隔30毫秒移动
}
}
function getStyle(obj,style){//obj.stlye.width获取的是样式值与obj.offsetWidth
if(obj.currentStyle){
return obj.currentStyle[style];//IE浏览器
}else{
return getComputedStyle(obj,false)[style];//火狐等浏览器
}
}
</script>
</head>
<body>
<div id="main">
<a href="#"><i><img src="../img/liu1.jpeg"></i><p>刘诗诗1</p></a>
<a href="#"><i><img src="../img/liu2.jpg"></i><p>刘诗诗2</p></a>
<a href="#"><i><img src="../img/liu3.jpg"></i><p>刘诗诗3</p></a>
<a href="#"><i><img src="../img/liu4.jpg"></i><p>刘诗诗4</p></a>
<a href="#"><i><img src="../img/liu5.jpg"></i><p>刘诗诗5</p></a>
<a href="#"><i><img src="../img/liu6.jpg"></i><p>刘诗诗6</p></a>
</div>
</body>
</html>
2回答
-
- lanrtop
- 2016-09-15 21:19:10
详解请看下面
http://www.imooc.com/qadetail/167004
-
- lanrtop
- 2016-09-15 21:15:11
将 var flag=true;
放到计时器obj.timer=setInterval(function(){ 里面 就可以解决了
JS动画效果
113925 学习 · 1443 问题
相似问题