为了账号安全,请及时绑定邮箱和手机立即绑定

为什么透明度可以实现,其他实现不了,望大神花点时间帮忙看看,谢谢!

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>淘宝网便民服务JS动画效果</title>

<style type="text/css">

*{

margin:0;

padding: 0;

}


#move{

border:1px solid #A2385A;

margin:100px auto;

width: 414px;

height: 304px;

}

a{

color: #999;

font-weight: bold;

font-family: "微软雅黑";

margin:20px;

display: inline-block;

height: 98px;

width: 92px;


position: relative;

float: left;

text-decoration: none;

}

a:hover{

color: #E55757;

text-decoration: underline;

}

img{

position: absolute;

top:0;

left:0;

filter:alpha(opacity:100);

opacity: 1;

}

p{


height: 20px;

line-height: 20px;



}

</style>

<script src="js/move_1.js"></script>

<script type="text/javascript">

window.onload=function(){

var div=document.getElementById('move'),

a=div.getElementsByTagName('a');

for(var i=0;i<a.length;i++){

a[i].onmouseover=function(){

var _this=this.getElementsByTagName('img')[0];

startmove(_this,{top:-50,opacity:0},function(){

startmove(_this,{top:0,opacity:1});

})

}

}

}


</script>

</head>

<body>

<div id="move">

<a href="#"><img src="images/Taobao_1.jpg"><p>华为手机</p></a>

<a href="#"><img src="images/Taobao_2.jpg"><p>苹果手机</p></a>

<a href="#"><img src="images/Taobao_3.jpg"><p>小米手机</p></a>

<a href="#"><img src="images/Taobao_4.jpg"><p>魅族手机</p></a>

<a href="#"><img src="images/Taobao_1.jpg"><p>金立手机</p></a>

<a href="#"><img src="images/Taobao_1.jpg"><p>三星手机</p></a>

</div>

</body>

</html>


function getstyle(obj,attr){

if (obj.currentStyle) {

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

//startmove(obj,{attr1:target1,attr2:target2}):同时传入多个属性与属性值

function startmove(obj,json,fn){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var flag=true;//假设所有的运动都到达目标值

for(var attr in json){

//取当前值

var icur=0;


if (attr=='opacity') {

icur=Math.round(parseFloat(getstyle(obj,attr))*100);

}else{

icur=parseInt(getstyle(obj,attr));

}

//算速度

var speed=(json[attr]-icur)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

//检测停止

//某一个属性到达目标值之后就会清除定时器,这时候如果其中有一个属性比较快到达目标值时,那么就会触发清除定时器,导致其它的属性还没有到达目标值,就被迫停止了。所以得让所有得属性到达目标值时才能关闭定时器

if (icur!=json[attr]) {

flag=false;

}

//如果属性是透明度的话要用if另做判断,因为透明度没有单位,和其他属性不一样

if (attr=='opacity') {

obj.style.filter='alpha(opacity:'+(icur+speed)+')';

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+'px';

}

}

//如果所有的运动都到达目标值,那么就触发触发清除定时器,如果有外加函数,那么就再执行外加函数fn()

if (flag==true) {

clearInterval(obj.timer);

//如果有外加函数,就执行

if (fn) {

fn();

}

}

},30)

}



透明度可以实现,但是鼠标滑过后图片就回不来了,而且文字也会向上浮动。


正在回答

1 回答

这里得opacity的值是100,不是1,不是图片每回来,是你图票透明了

startmove(_this,{top:-50,opacity:0},function(){
					startmove(_this,{top:0,opacity:100});
				})

css我不熟悉,但文字可以用类似这样的css定位

p{
    position:absolute;
    bottom:0px;
    padding:0px;
    margin:0px
    }


0 回复 有任何疑惑可以回复我~
#1

慕粉18144024425 提问者

已解决,谢谢
2017-01-14 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么透明度可以实现,其他实现不了,望大神花点时间帮忙看看,谢谢!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信