> 웹 프론트엔드 > JS 튜토리얼 > JavaScript&jQuery를 사용하여 스크롤 게시판을 구현하는 방법(코드 예)

JavaScript&jQuery를 사용하여 스크롤 게시판을 구현하는 방법(코드 예)

云罗郡主
풀어 주다: 2019-01-21 11:21:02
앞으로
3840명이 탐색했습니다.

本篇文章给大家带来的内容是关于如何利用JavaScript&jQuery实现滚动公告栏(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

JavaScript&jQuery를 사용하여 스크롤 게시판을 구현하는 방법(코드 예)

首先看HTML结构,css样式这里不再给出

<div class="book_class">
                <div id="dome">
                    <div id="dome1">
                        <ul id="express">
                            <li>・2010考研英语大纲到货75折...</li>
                            <li>・权威定本四大名著(人民文...</li>
                            <li>・口述历史权威唐德刚先生国...</li>
                            <li>・袁伟民与体坛风云:实话实...</li>
                            <li>・我们台湾这些年:轰动两岸...</li>
                            <li>・畅销教辅推荐:精品套书50...</li>
                            <li>・2010版法律硕士联考大纲75...</li>
                            <li>・计算机新书畅销书75折抢购</li>
                            <li>・2009年孩子最喜欢的书>></li>
                            <li>・弗洛伊德作品精选集59折</li>
                            <li>・畅销教辅推荐:精品套书50...</li>
                        </ul>
                    </div>
                </div>
            </div>
로그인 후 복사

js代码

请首先确保已经引入jQuery

//滚动字
  //确保绝对定位
  //使用定时函数
  var top=0;  var t = setInterval(function () {    //先设置margin-top为0
    $("#express li:first").css("margin-top",top);    //li的高度为25,故这里以25判断第一行是否走出ul。
    if(top<-25){      //如果第一行已经走出ul,将top归零,为下个li做准备
      top=0;      //这句话的意思是,先将首行的top设为0,拷贝该行,放置最后一行
      //注意,如果这里不将第一行的top归零,拷贝后他将保持top=-25的状态,效果就是叠加在最后一行上。
      $("#express li:first").css("margin-top",top).clone(true).appendTo (&#39;#express&#39;);      //移除首行,这时第二行变为首行
      $("#express li:first").remove();
    }else{      //如果第一行还未走出ul,top自减
      top-=1;
    }
  },50);
로그인 후 복사

额外的代码

实现当滚动时,鼠标放置后可以停止,移出时仍可以进行

//当鼠标放置后停止,松开继续走
  $("#express li").hover(function() {    //清除定时
    clearInterval(t);
  }, function() {
    t = setInterval(function () {      //先设置margin-top为0
      $("#express li:first").css("margin-top",top);      //li的高度为25,故这里以25判断第一行是否走出ul。
      if(top<-25){        //如果第一行已经走出ul,将top归零,为下个li做准备
        top=0;        //这句话的意思是,先将首行的top设为0,拷贝该行,放置最后一行
        //注意,如果这里不将第一行的top归零,拷贝后他将保持top=-25的状态,效果就是叠加在最后一行上。
        $("#express li:first").css("margin-top",top).clone(true).appendTo (&#39;#express&#39;);        //移除首行,这时第二行变为首行
        $("#express li:first").remove();
      }else{        //如果第一行还未走出ul,top自减
        top-=1;
      }
    },50);
  });
로그인 후 복사

以上就是对如何利用JavaScript&jQuery实现滚动公告栏(代码实例)的全部介绍,如果您想了解更多有关JavaScript教程,请关注PHP中文网。

위 내용은 JavaScript&jQuery를 사용하여 스크롤 게시판을 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿