求大神看看，我的問題不知道錯在哪了，動畫向上消失以后，不會回來，得把鼠標移除再進來
這是.html
<!DOCTYPE html>
<html>
<head>
? ?<title> 同時運動 </title>
? ?<meta charset="UTF-8">
? ?<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
? ?<script src="index.js"></script>
? ?<style>
? ? ? ?#move a:hover{
? ? ? ? ? ?/*鼠標放在圖片上*/
? ? ? ? ? ?color: #f00;
? ? ? ?}
? ? ? ?#move img{
? ? ? ? ? ?border: none;
? ? ? ?}
? ? ? ?#move a{
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?width: 100px;
? ? ? ? ? ?height: 150px;
? ? ? ? ? ?border: 1px solid #dddddd;
? ? ? ? ? ?border-radius: 3px;
? ? ? ? ? ?background-color: #fff;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?margin: 10px 17px;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?/*padding-top: 40px;*/
? ? ? ? ? ?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: 0px;
? ? ? ?}
? ? ? ?#move {
? ? ? ? ? ?width: 500px;
? ? ? ? ? ?height: 400px;
? ? ? ? ? ?background-color: #9c9c9c;
? ? ? ? ? ?border: 1px solid black;
? ? ? ? ? ?margin: auto;
? ? ? ? ? ?padding:20px;
? ? ? ?}
? ?</style>
? ?<script>
? ? ? ?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 (){
? ? ? ? ? ? ? ? ? ?var _this = this.getElementsByTagName("i")[0];
? ? ? ? ? ? ? ? ? ?startMove(_this,{top:-100,opacity:0},function(){
? ? ? ? ? ? ? ? ? ? ? ?_this.style.top = 10+"px";
? ? ? ? ? ? ? ? ? ? ? ?startMove(_this,{top:0,opacity:100})
? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ?</script>
</head>
<body>
<div id="move">
? ?<a href="#"><i><img src="001.jpg"></i><p>彩票</p></a>
? ?<a href="#"><i><img src="001.jpg"></i><p>電影</p></a>
? ?<a href="#"><i><img src="001.jpg"></i><p>音樂</p></a>
? ?<a href="#"><i><img src="001.jpg"></i><p>繳費</p></a>
? ?<a href="#"><i><img src="001.jpg"></i><p>理財</p></a>
? ?<a href="#"><i><img src="001.jpg"></i><p>外賣</p></a>
</div>
</body>
</html>
下面是 .js里面的
/**
* Created by Administrator on 2016/4/19.
*/
function ?getStyle(obj,attr){
? ?if(obj.currentStyle){
? ? ? ?return obj.currentStyle[attr];
? ?}else {
? ? ? ?return getComputedStyle(obj,false)[attr];
? ?}
}
//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 = 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)
}
2016-04-19
function startMove(obj,json,fn){
? ?clearInterval(obj.timer);
? ?obj.timer = setInterval(function(){
? ? ? ?for (var attr in ?json){
? ? ? ? ? ?//1.取當前的值
? ? ? ? ? ?var icur = 0;
? ? ? ? ? ?var flag = true;//假設所有的運動都到達目標值
? ? ? ? ? ?if(attr == "opacity"){
? ? ? ? ? ? ? ?icur = Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ? ? ? ?}else {
? ? ? ? ? ? ? ?icur = parseInt(getStyle(obj,attr));
? ? ? ? ? ?}
? ? ? ? ? ?//2.算速度
flag放錯位置了
2016-04-19
知道了，我的框架有問題，應該是這樣的
function startMove(obj,json,fn) {?
? clearInterval(obj.timer);
? var flag;
? obj.timer= setInterval(function(){
? flag= true;
? for(var attr in json){
? //1.取當前的值
? var incur=0;
? if(attr=='opacity'){
? ? ?incur=Math.round(parseFloat(getStyle(obj,attr))*100);?
? }else{
? ? ?incur=parseInt(getStyle(obj,attr));
? }
? //2.算速度
? var speed= (json[attr]-incur)/15;
? speed= speed>0?Math.ceil(speed):Math.floor(speed);
? //3.檢測停止
? if(incur!=json[attr]){
? ? flag= false;?
? }
? if(attr=='opacity'){
? ? ? ?obj.style.filter='alpha(opacity:'+(incur+speed)+')';
? ? ? ?obj.style.opacity=(incur+speed)/100;
? ? }else{
? ? ? ?obj.style[attr]=incur+speed+'px';
? ? ? }
? }
? if(flag){
? ? clearInterval(obj.timer);
? ? if(fn){
? ? ? fn();
? ? }
? }
? },20) ?
}
function getStyle(obj,attr){
? if(obj.currentStyle){
? return obj.currentStyle[attr];//IE
? }else{
? return getComputedStyle(obj,false)[attr];//firefox
? }
}