Bug(案例)图片的垂直出现隐藏

这个案例是一个出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所在欢迎联系我,不胜感谢

posted @ 2016-11-10 10:25  rookieM  阅读(425)  评论(0)  编辑  收藏  举报