这个案例是一个出Bug的案例,很抱歉本人没有找到bug在哪,但是功能却实现了.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } body { background: #A9A9A9; } #div { width: 360px; height: 90px; background: #F0FFFF; margin: 50px auto 0; border: 1px solid #F5F5DC; } #div a { display: inline-block; width: 50px; height: 50px; margin: 20px; float: left; background: #FFF8DC; text-align: center; opacity: 1; color: #9c9c9c; filter: alpha(opacity=30); position: relative; overflow: hidden; /*200 40*4=160*/ /*50+40*/ } #div a i { position: absolute; top: 0; left: 10px; display: inline-block; text-align: center; opacity: 1; filter: alpha(opacity=30); } #div a p { position: absolute; top: 35px; left: 12px; } </style> <script src="changfunction.js"></script> <script> function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { //aLi为当前图片的集合 var aLi = $("div").getElementsByTagName("a"); for (var i = 0; i < aLi.length; i++) { //当鼠标进入图片所在的标签触发事件 aLi[i].onmouseenter = function() { //给每个a标签里面的i标签设为数组，并确定第一个为0 var imgThis = this.getElementsByTagName("i")[0]; //调用js隐藏图片 changeBtn(imgThis, { top: -30, opacity: 0 }, function() { //当图片隐藏的时候设置图片的top值移动至下方 imgThis.style.top = 30 + 'px'; //console.log(top); //重新调用js显示图片 changeBtn(imgThis, { top: 0, opacity: 100 }); }); } } } </script> </head> <body> <div id="div"> <a><i><img src="img/one.png" alt=""></i><p>一号</p></a> <a><i><img src="img/two.png" alt=""></i><p>二号</p></a> <a><i><img src="img/three.png" alt=""></i><p>三号</p></a> <a><i><img src="img/three.png" alt=""></i><p>四号</p></a> </div> </body> </html>
下面为引用的changefunction函数
1 function $(id) { 2 return typeof id === "string" ? document.getElementById(id) : id; 3 } 4 5 6 7 8 //obj为当前的鼠标所指向的标签 9 //stChg为对应的变量样式 10 //chgWid为需要改变的值 11 //changeBtn(obj,{stChg1:chgWid1,stChg2:chgWid2},tog) 12 function changeBtn(obj, json, fn) { 13 //定义一个值，设定为真 14 var flag = true; 15 clearInterval(obj.timer); 16 17 18 obj.timer = setInterval(function() { 19 20 for (var stChg in json) { 21 22 //chg这个变量本来为长度，宽度，或者透明度什么的 23 //但是现在通过一个getStyle()函数来获取 24 var chg = 0; 25 //进入函数，需要先判定是否透明度样式 26 if (stChg == 'opacity') { 27 //为真，则执行parseFloat()此方法返回的是浮点数 28 chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100); 29 } else { 30 //为假，则执行parseInt()此方法返回的是整数 31 chg = parseInt(getStyle(obj, stChg)); 32 } 33 //判定初始值(chg)是否小于输入值(chgWid) 34 //speed = (json[stChg] - chg) / 10; 35 //speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 36 if (json[stChg] > chg) { 37 speed = 10; 38 } else { 39 speed = -10; 40 } 41 //console.log(speed); 42 if (chg == json[stChg]) { 43 //当有一个参数没有达到时候，flag就不会为真，往下继续执行自增自减 44 clearInterval(obj.timer); 45 46 47 } else { 48 49 50 //不等，则先进性判定样式是否为特殊样式opacity 51 if (stChg == 'opacity') { 52 //为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed 53 //比如开始是(30+10),那么下一次就为(40+10) 54 obj.style.opacity = (chg + speed) / 100; 55 //为真，对应的ie浏览器，方法同上 56 obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')'; 57 } else { 58 //为假则为普通样式取值，stChg为width时style[width]=style.width 59 obj.style[stChg] = chg + speed + 'px'; 60 } 61 } 62 } 63 64 //当为真时，即所有参数都已经达到，则清楚定时器 65 /*if (flag) { 66 clearInterval(obj.timer); 67 68 //判断是否有回调函数 69 if (fn) { 70 fn(); 71 } 72 }*/ 73 74 }, 30); 75 } 76 77 78 //这个函数返回的是一个值，例如attr传参为width 79 //为真时obj.currentStyle[attr]=200 80 function getStyle(obj, attr) { 81 if (obj.currentStyle) { 82 //currentStyle获取样式的值，对应的是ie浏览器 83 return obj.currentStyle[attr]; 84 } else { 85 //同理，对应的是其他浏览器 86 return getComputedStyle(obj, false)[attr]; 87 } 88 } 89
找出Bug所在欢迎联系我,不胜感谢