為什么動(dòng)畫不動(dòng)呢
這個(gè)是move.js的代碼
?//調(diào)用JSON
? ? startMove(obj,{attr1:itarget1,attr2:itarget2},fn) ?//attr1是name itarget1是值
? ? ?//封裝函數(shù)
function startMove(obj,json,fn){ //fn是回調(diào)函數(shù)
var ?flag = true; // ?標(biāo)志所有運(yùn)動(dòng)是否到達(dá)目標(biāo)值?
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
// 1.取當(dāng)前的值
var icur = 0;
//判斷是否為透明度
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100); //小數(shù)的取值parseFloat
}
else{
icur = parseInt(getStyle(obj,attr));
}
//var icur=parseInt(getStyle(obj,attr)); ?//記住parseInt獲取的是整數(shù)
// 2.算速度
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
// 3.檢測(cè)停止
if(icur != json[attr]){
flag=false; //假設(shè)有三個(gè)json的key/value值，這三個(gè)值中只要有一個(gè)沒有達(dá)到目標(biāo)值，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);
}
//取樣時(shí)
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
?
<!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;/*應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，周圍元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性*/
? ? ? ? ? ?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代碼 不明白動(dòng)畫為什么不動(dòng)
圖標(biāo)我用的現(xiàn)在淘寶這個(gè)版本的圖片
2016-05-25
var oMain=document.getElementById('main')這句不對(duì)，你html中定義的id是move，js中卻用的main，把main改成move就對(duì)了