首页 > web前端 > js教程 > 正文

如何利用JavaScript&jQuery实现滚动公告栏(代码实例)

云罗郡主
发布: 2019-01-21 11:20:38
转载
4002人浏览过

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

微信截图_20190121111952.png

首先看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代码

立即学习Java免费学习笔记(深入)”;

请首先确保已经引入jQuery

ViiTor实时翻译
ViiTor实时翻译

AI实时多语言翻译专家!强大的语音识别、AR翻译功能。

ViiTor实时翻译 116
查看详情 ViiTor实时翻译
//滚动字
  //确保绝对定位
  //使用定时函数
  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 ('#express');      //移除首行,这时第二行变为首行
      $("#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 ('#express');        //移除首行,这时第二行变为首行
        $("#express li:first").remove();
      }else{        //如果第一行还未走出ul,top自减
        top-=1;
      }
    },50);
  });
登录后复制

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

以上就是如何利用JavaScript&jQuery实现滚动公告栏(代码实例)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号