<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#move a:hover{
color: #f00;
}
#move img{
border: none;
}
#move a{
display: inline-block;/*应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性*/
width: 100px;
height: 100px;
border: 1px solid #dddddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 11px;
color: #9c9c9c;
font-size: 20px;
text-decoration: none;
line-height: 15px;
overflow: hidden;
border: 1px solid rebeccapurple;
}
#move a i{
position: relative;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
opacity: 1;
top: 11px;
}
#move {
width: 428px;
height: 280px;
background-color: #9c9c9c;
border: 1px solid black;
margin: auto;
padding:20px;
}
</style>
<script src="JS/move-完美.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oMain=document.getElementById('main'),
oLis=oMain.getElementsByTagName('a');
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseenter=function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-11,opacity:0},function(){
_this.style.top=30+'px';
startMove(_this,{top:11,opacity:100})
});
};
}
}
</script>
</head>
<body>
<div id="move">
<a href="#">
<i><img src="img/taobao-lvxing.jpg"/></i>
<p>旅行</p>
</a>
<a href="#">
<i><img src="img/taobao-lvxing.jpg"/></i>
<p>旅行</p>
</a>
<a href="#">
<i><img src="img/taobao-movie.jpg"/></i>
<p>电影</p>
</a>
<a href="#">
<i><img src="img/taobao-music.jpg"/></i>
<p>音乐</p>
</a>
<a href="#">
<i><img src="img/taobao-waimai.jpg"/></i>
<p>外卖</p>
</a>
<a href="#">
<i><img src="img/taobao-waimai.jpg"/></i>
<p>外卖</p>
</a>
</div>
</body>
</html>
这是html代码 不明白动画为什么不动
图标我用的现在淘宝这个版本的图片
这个是move.js的代码
//调用JSON
startMove(obj,{attr1:itarget1,attr2:itarget2},fn) //attr1是name itarget1是值
//封装函数
function startMove(obj,json,fn){ //fn是回调函数
var flag = true; // 标志所有运动是否到达目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
// 1.取当前的值
var icur = 0;
//判断是否为透明度
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100); //小数的取值parseFloat
}
else{
icur = parseInt(getStyle(obj,attr));
}
//var icur=parseInt(getStyle(obj,attr)); //记住parseInt获取的是整数
// 2.算速度
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
// 3.检测停止
if(icur != json[attr]){
flag=false; //假设有三个json的key/value值，这三个值中只要有一个没有达到目标值，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];
}
}