js实现文字横向滚动

来源：互联网发布：淘宝网首页女装毛衣编辑：程序博客网时间：2024/05/22 09:50
js实现文字横向滚动
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字横向滚动</title><style type="text/css">#div1 {    width: 200px;    height: 100px;    margin: 80px auto;    overflow: hidden;    background: #DDE5ED;    color: #0C77CF;}#div1 #scroll_begin, #div1 #scroll_end {    display: inline;}#scroll_div {    width: 200px;    height: 90px;    margin: 0 auto;    white-space: nowrap;    overflow: hidden;}</style><script type="text/javascript">    //取对象的封装    function $(eleStr) {        //为了区分，不同的取对象方式，以加前缀的方式来区分        //id加#  class加.  name加_  tagName不加前缀          switch (eleStr.substr(0, 1)) {        case "#":            return document.getElementById(eleStr.substr(1));            break;        case ".":            return document.getElementsByClassName(eleStr.substr(1));            break;        case "_":            return document.getElementsByName(eleStr.substr(1));            break;        default:            return document.getElementsByTagName(eleStr);            break;        }    }    function horizontalScroll() {        var speed = 50; //滚动速度        var scroll_begin = $("#scroll_begin");        var scroll_end = $("#scroll_end");        var scroll_div = $("#scroll_div");        scroll_end.innerHTML = scroll_begin.innerHTML;        function Marquee() {            // offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width            // scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)                scroll_div.scrollLeft -= scroll_begin.offsetWidth;            else                scroll_div.scrollLeft++;        }        var MyMar = setInterval(Marquee, speed);        scroll_div.onmouseover = function() { //鼠标放上停止            clearInterval(MyMar);        }        scroll_div.onmouseout = function() { //鼠标移开继续滚动            MyMar = setInterval(Marquee, speed);        }    }</script></head><body>    <div id="div1">        <div id="scroll_div" class="scroll_div">            <div id="scroll_begin">                <ul>                    <li>aaaaaaa</li>                    <li>bbbbbbbbbbbbbbbbbbbbb</li>                    <li>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>                </ul>            </div>            <div id="scroll_end"></div>        </div>        <script type="text/javascript">            horizontalScroll();        </script>    </div></body></html>
0 0