为什么透明度可以实现，其他实现不了，望大神花点时间帮忙看看，谢谢！
慕粉18144024425
2017-01-11 11:10
<!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回答
-
- 破烂熊
- 2017-01-13 22:51:50
这里得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 }
JS动画效果
113925 学习 · 1443 问题
相似问题