美文网首页
用JavaScript实现跑马灯效果

用JavaScript实现跑马灯效果

作者: Young_Blood | 来源:发表于2016-09-10 09:57 被阅读294次
<html>
 <head>
  <script>
        ~function () {
            var box = document.getElementById("box");
            var wrap = document.getElementById("wrap");
            var conBegin = document.getElementById("conBegin");
            var conBegin_width = getCss(conBegin,"width");
            
            var timer = window.setInterval(move,10);

            function move() {
                wrap.scrollLeft++;
                var curLeft = wrap.scrollLeft;
                if (curLeft>=conBegin_width) {
                    wrap.scrollLeft = 0;
                }
            }

            box.onmouseover = function () {
                window.clearInterval(timer);
            };

            box.onmouseout = function () {
                timer = window.setInterval(move,10);
            };
        }();


        function getCss(curEle, attr) {
            var val = null,reg = null;

            if ("getComputedStyle" in window) {
                val = window.getComputedStyle(curEle,null)[attr];
            } else {
                if (attr === "opacity") {
                    val = curEle.currentStyle["filter"];
                    reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val) ? reg.exec(val)[1]/100 : 1;
                } else {
                    val = curEle.currentStyle[attr];
                }
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
            return reg.test(val) ? parseFloat(val) : val;
        }

    </script>
 </head>
 <body></body>
</html>

相关文章

网友评论

      本文标题:用JavaScript实现跑马灯效果

      本文链接:https://www.haomeiwen.com/subject/uceyettx.html