js 文字左滚动

JavaScript013

js 文字左滚动,第1张

这是JS

<script type="text/javascript">

               

                   $(function(){

                    var speed = 30

                    var topscroll = document.getElementById("divkuaixunxinxi")

                    var scrolla = document.getElementById("topscrolla")

                    var scrollb = document.getElementById("topscrollb")

                    var scroll  = document.getElementById("scroll")

                    var isIE6_7 = false

                    if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style || $.browser.msie&&($.browser.version == "7.0")){

                        scroll.style.width="1600px"

                        isIE6_7 = true

                    }else{

                        scroll.style.width=(scrolla.offsetWidth*2-50)+"px"

                    }

                    

                        scrollb.innerHTML = scrolla.innerHTML

                        function Marquee() {

                            if (scrollb.offsetWidth -  topscroll.scrollLeft <=0)

                                topscroll.scrollLeft -= scrolla.offsetWidth

                            else {

                                topscroll.scrollLeft++

                                if(isIE6_7 && topscroll.scrollLeft > 1718){

                                topscroll.scrollLeft -= scrolla.offsetWidth

                                }

                            }

                        }

                        var mar = setInterval(Marquee, speed)

                        topscroll.onmouseover = function() { clearInterval(mar) }

                        topscroll.onmouseout = function() { mar = setInterval(Marquee, speed) }

                  })

        </script>

        这是HTML

        <div id="divkuaixunxinxi" class="kuaixunxinxi">

                <div id="scroll">

                    <div id="topscrolla">

                                   ·<a>平价私享天堂假期3日梦幻爱昵岛</a>平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛 

                    </div>

                    <div id="topscrollb">

                    </div>

                </div>

            </div>

不好意思具体代码不想写了。

给你个思路：

你这个布局有问题，

html代码如下：

<div style="overflow:hddenwidth:500pxheight:300pxposition:relative">

<div style="width:1000pxheight:300pxposition:absolutetop:0px" id="内容区域">

<ul style="width:500pxfloat:left">

<li>1条</li>

<li>2条</li>

<li>3条</li>

</ul>

<ul style="width:500pxfloat:left">

<li>4条</li>

<li>5条</li>

<li>6条</li>

</ul>

</div>

</div>

id="内容区域" 你这个id自己换下 为了后面方便说先这么写了。

给你的 “ 换一换 ” 添加点击事件，

点击一下让 内容区域 的top值 ，在原来的基础上向左移动500px；也就是原来的top-500。