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];
}
}萬分感謝！
2016-03-05
不是很明白，求指導
2016-03-02
任何想要移動的 東西 都要加position定位 ? ??