i是字体小图标不能实现功能吗？
那个i里面放的是字体小图不能实现运动框架吗？一定要图片才能够实现运动框架吗？能帮我看看出了什么问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JS动画案例</title>
<style type="text/css">
@font-face {font-family: 'iconfont';src: url('images/font/iconfont.eot'); /* IE9*/src: url('images/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('images/font/iconfont.woff') format('woff'), /* chrome、firefox */url('images/font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('images/font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}
.iconfont{font-family:"iconfont" !important;font-size:20px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;margin-top: 10px;}
#move{width: 250px;height: 160px;overflow: hidden;}
a{display: block;float: left;width: 50px;height: 70px;border:1px solid #ccc;margin:5px;text-align: center;text-decoration: none;overflow: hidden;color: #f40;}
i{display: inline-block;margin-top: 20px;filter: alpha(opacity=100);opacity: 1;}
p{margin-top: 5px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function(){
var oMove=document.getElementById('move');
var aList=oMove.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){//给每个a绑定一个鼠标移入事件
var _this=this.getElementsByTagName('i')[0];//获取第一个i
startMove(_this,{top:-25;opacity:0});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i></i><p>话费</p></a>
<a href="#"><i></i><p>游戏</p></a>
<a href="#"><i></i><p>旅行</p></a>
<a href="#"><i></i><p>保险</p></a>
<a href="#"><i>󰀻</i><p>彩票</p></a>
<a href="#"><i></i><p>电影</p></a>
<a href="#"><i></i><p>外卖</p></a>
<a href="#"><i></i><p>理财</p></a>
</div>
</body>
</html>
下面是那个运动框架的js
// startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,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);//判断当前是不是透明度
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/8;//速度值等于目标值减去当前宽度再除一个数字
speed=speed>0?Math.ceil(speed):Math.floor(speed);//只要是缓冲运动都要判断
//3.检测停止
if (icur==json[attr])
{
flag=true;
}else{
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];
}
}万分感谢！
