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函数

  function $(id) {

      return typeof id === "string" ? document.getElementById(id) : id;

  }

  //obj为当前的鼠标所指向的标签

  //stChg为对应的变量样式

  //chgWid为需要改变的值

  //changeBtn(obj,{stChg1:chgWid1,stChg2:chgWid2},tog)

  function changeBtn(obj, json, fn) {

      //定义一个值，设定为真

      var flag = true;

      clearInterval(obj.timer);

      obj.timer = setInterval(function() {

          for (var stChg in json) {

              //chg这个变量本来为长度，宽度，或者透明度什么的

              //但是现在通过一个getStyle()函数来获取

              var chg = 0;

              //进入函数，需要先判定是否透明度样式

              if (stChg == 'opacity') {

                  //为真，则执行parseFloat()此方法返回的是浮点数

                  chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100);

              } else {

                  //为假，则执行parseInt()此方法返回的是整数

                  chg = parseInt(getStyle(obj, stChg));

              }

              //判定初始值(chg)是否小于输入值(chgWid)

              //speed = (json[stChg] - chg) / 10;

              //speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

              if (json[stChg] > chg) {

                  speed = 10;

              } else {

                  speed = -10;

              }

              //console.log(speed);

              if (chg == json[stChg]) {

                  //当有一个参数没有达到时候，flag就不会为真，往下继续执行自增自减

                  clearInterval(obj.timer);

              } else {

                  //不等，则先进性判定样式是否为特殊样式opacity

                  if (stChg == 'opacity') {

                      //为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed

                      //比如开始是(30+10),那么下一次就为(40+10)

                      obj.style.opacity = (chg + speed) / 100;

                      //为真，对应的ie浏览器，方法同上

                      obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')';

                  } else {

                      //为假则为普通样式取值，stChg为width时style[width]=style.width

                      obj.style[stChg] = chg + speed + 'px';

                  }

              }

          }

          //当为真时，即所有参数都已经达到，则清楚定时器

          /*if (flag) {

              clearInterval(obj.timer);

              //判断是否有回调函数

              if (fn) {

                  fn();

              }

          }*/

      }, 30);

  }

  //这个函数返回的是一个值，例如attr传参为width

  //为真时obj.currentStyle[attr]=200

  function getStyle(obj, attr) {

      if (obj.currentStyle) {

          //currentStyle获取样式的值，对应的是ie浏览器

          return obj.currentStyle[attr];

      } else {

          //同理，对应的是其他浏览器

          return getComputedStyle(obj, false)[attr];

      }

  }

找出Bug所在欢迎联系我,不胜感谢

巴特西

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

最新文章

热门文章