i是字體小圖標(biāo)不能實(shí)現(xiàn)功能嗎？
那個(gè)i里面放的是字體小圖不能實(shí)現(xiàn)運(yùn)動(dòng)框架嗎？一定要圖片才能夠?qū)崿F(xiàn)運(yùn)動(dòng)框架嗎？能幫我看看出了什么問(wèn)題？
<!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動(dòng)畫(huà)案例</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(){//給每個(gè)a綁定一個(gè)鼠標(biāo)移入事件
var _this=this.getElementsByTagName('i')[0];//獲取第一個(gè)i
startMove(_this,{top:-25;opacity:0});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i></i><p>話費(fèi)</p></a>
<a href="#"><i></i><p>游戲</p></a>
<a href="#"><i></i><p>旅行</p></a>
<a href="#"><i></i><p>保險(xiǎn)</p></a>
<a href="#"><i>󰀻</i><p>彩票</p></a>
<a href="#"><i></i><p>電影</p></a>
<a href="#"><i></i><p>外賣(mài)</p></a>
<a href="#"><i></i><p>理財(cái)</p></a>
</div>
</body>
</html>
下面是那個(gè)運(yùn)動(dòng)框架的js
// startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
//假設(shè)所有運(yùn)動(dòng)都到達(dá)目標(biāo)值
var flag=true;
clearInterval(obj.timer);//一開(kāi)始要清除下定時(shí)器
obj.timer=setInterval(function(){//重新創(chuàng)建一個(gè)定時(shí)器
for(var attr in json){
//1.取當(dāng)前的值
var icur=0;
if(attr == 'opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);//判斷當(dāng)前是不是透明度
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/8;//速度值等于目標(biāo)值減去當(dāng)前寬度再除一個(gè)數(shù)字
speed=speed>0?Math.ceil(speed):Math.floor(speed);//只要是緩沖運(yùn)動(dòng)都要判斷
//3.檢測(cè)停止
if (icur==json[attr])?
? ? ? ? ? ?{
? ? ? ? ? ? ? ?flag=true;
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?flag=false;
? ? ? ? ? ?}
if(attr == 'opacity'){//等號(hào)之間的空格不能省
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];
}
}萬(wàn)分感謝！
2016-03-05
不是很明白，求指導(dǎo)
2016-03-02
任何想要移動(dòng)的 東西 都要加position定位 ? ??