為什么透明度可以實(shí)現(xiàn)，其他實(shí)現(xiàn)不了，望大神花點(diǎn)時(shí)間幫忙看看，謝謝！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶網(wǎng)便民服務(wù)JS動(dòng)畫效果</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>華為手機(jī)</p></a>
<a href="#"><img src="images/Taobao_2.jpg"><p>蘋果手機(jī)</p></a>
<a href="#"><img src="images/Taobao_3.jpg"><p>小米手機(jī)</p></a>
<a href="#"><img src="images/Taobao_4.jpg"><p>魅族手機(jī)</p></a>
<a href="#"><img src="images/Taobao_1.jpg"><p>金立手機(jī)</p></a>
<a href="#"><img src="images/Taobao_1.jpg"><p>三星手機(jī)</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}):同時(shí)傳入多個(gè)屬性與屬性值
function startmove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;//假設(shè)所有的運(yùn)動(dòng)都到達(dá)目標(biāo)值
for(var attr in json){
//取當(dāng)前值
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);
//檢測(cè)停止
//某一個(gè)屬性到達(dá)目標(biāo)值之后就會(huì)清除定時(shí)器，這時(shí)候如果其中有一個(gè)屬性比較快到達(dá)目標(biāo)值時(shí)，那么就會(huì)觸發(fā)清除定時(shí)器，導(dǎo)致其它的屬性還沒有到達(dá)目標(biāo)值，就被迫停止了。所以得讓所有得屬性到達(dá)目標(biāo)值時(shí)才能關(guān)閉定時(shí)器
if (icur!=json[attr]) {
flag=false;
}
//如果屬性是透明度的話要用if另做判斷，因?yàn)橥该鞫葲]有單位，和其他屬性不一樣
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}
}
//如果所有的運(yùn)動(dòng)都到達(dá)目標(biāo)值，那么就觸發(fā)觸發(fā)清除定時(shí)器，如果有外加函數(shù)，那么就再執(zhí)行外加函數(shù)fn()
if (flag==true) {
clearInterval(obj.timer);
//如果有外加函數(shù)，就執(zhí)行
if (fn) {
fn();
}
}
},30)
}
透明度可以實(shí)現(xiàn)，但是鼠標(biāo)滑過后圖片就回不來(lái)了，而且文字也會(huì)向上浮動(dòng)。
2017-01-13
這里得opacity的值是100,不是1,不是圖片每回來(lái),是你圖票透明了
startmove(_this,{top:-50,opacity:0},function(){ startmove(_this,{top:0,opacity:100}); })css我不熟悉,但文字可以用類似這樣的css定位
p{ ????position:absolute; ????bottom:0px; ????padding:0px; ????margin:0px ????}