不知道為什么透明度變不了目標(biāo)值，是不是starMove這個函數(shù)存在問題？移進(jìn)去的時候透明度就變不了0，最后也變不了100？？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阿里巴巴</title>
<script type="text/javascript">
window.onload=function () {
var adiv=document.getElementById('move');
var alist=adiv.getElementsByTagName("a");
for (var i = 0; i <alist.length; i++) {
alist[i].onmouseover=function () {
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-20,opacity:0},function(){
_this.style.top=20+"px";
startMove(_this,{top:15,opacity:100});
})
}
}
}
function startMove(obj,json,fn) {
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;//假設(shè)所有運動都到達(dá)目標(biāo)
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(attr=="opacity"){
obj.style.filter="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+"px";}
if (flag) {
clearInterval(obj.timer);
if (fn) {fn();
}
}
}
},30)
}
function getStyle(obj,attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{return getComputedStyle(obj,false)[attr];}
}
</script>
<style type="text/css">
*{margin:0px;
padding: 0px;}
#move{width: 300px;
margin: 10px auto;
border:1px solid #ccc;
border-radius: 3px;
background-color:#DDD;?
}
#move a{display: inline-block;
width: 58px;
height: 25px;
border:1px solid #ddd;
border-radius: 5px;
background-color: #fff;
margin:10px 17px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
overflow: hidden;
text-align: center;
}
#move a i{position: absolute;
top:15px;
left: 0;
display: inline-block;
width:100%;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
}
#move a:hover{color:#F00;}
#move img{
border:none;
}
</style>
</head>
<body>
<div id="move">
<a href="#"><i><img src="images/game.png"></i><p>游戲</p></a>
<a href="#"><i><img src="images/movie.png"></i><p>電影</p></a>
<a href="#"><i><img src="images/food.png"></i><p>美食</p></a>
<a href="#"><i><img src="images/lottery.png"></i><p>彩票</p></a>
<a href="#"><i><img src="images/travel.png"></i><p>旅行</p></a>
<a href="#"><i><img src="images/insurance.png"></i><p>保險</p></a>
</div>
</body>
</html>
2017-03-15
function getStyle(obj,attr){
?? ?if(obj.currentStyle){
?? ??? ?return obj.currentStyle[attr];
?? ??? ?}else{
?? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ?}
?? ?}
?? ?
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
?? ?var flag=true; ?
?? ?for(var attr in json){
?? ??? ?
?? ?var par=0;
?? ?if(attr=='opacity'){
?? ??? ?var par=Math.round(parseFloat(getStyle(obj,attr))*100);
?? ??? ?}else{
?? ??? ??? ?var par=parseInt(getStyle(obj,attr));
?? ??? ??? ?}
???? var speed=(json[attr]-par)/20;
?? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ? if(par!=json[attr]){
?? ???? flag=false;
?? ? } ?? ??? ?
?? ?if(attr=='opacity'){
?? ??? ?obj.style.filter='alpha(opacity:'+(par+speed)+')';
?? ??? ?obj.style.opacity=(par+speed)/100;
?? ?}else{?? ??? ?
?? ??? ? obj.style[attr]=par+speed+"px";
?? ?}
?? ??? ?
?? ??? ? ?? ?
?? ?}
?? ?if(flag){
?? ??? ?? clearInterval(obj.timer);
?????????????????????? if(fn){? //檢測是否有回調(diào)函數(shù)，有就執(zhí)行
?????????????????????????? fn();
?????????????????????? }
?? ??? ?
?? ??? ?
?? ??? ?}
?? ?
?? ?},30);
}
這是老師的? 你看看?? 可能我們的方法名稱不一樣