jQuery实现上下滚动公告栏详细代码


Posted in jQuery onNovember 21, 2018

之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候公告上下滚动的时候,两条公告会重叠在一起。最后我还是决定自己写一个上下滚动的公告栏。

jQuery实现上下滚动公告栏详细代码

虽然在网上找的有些代码有时候会出现一些问题,但是思路咱还是可以借鉴一下的。

我们先来看一下,我做的上下滚动公告栏效果图,如果你感觉是你要的那款,那么你再接着往下看是怎么实现的。

图中箭头所指内容就是公告内容,它会不停的上下滚动,当然滚动时间可以自己设置的。

下面我们来看下是怎么实现的。

其实实现滚动效果主要用到jQuery中的animate() 方法,而animate() 方法就是创建动画效果,简单的说就是,当我们用js将“一棵树”的height属性从100px变为200px的时候,我们会看到“这个树”瞬间从100高度长到了200高度,但是我们用animate() 方法,我们会看到“这颗树”从100高度慢慢的长到200高度,我们可以看到这个过程,这就是animate() 方法的作用,当然“树”的生长速度是可以控制的。

了解了jQuery的animate()方法,我们还需要了解一下setInterval( )这个方法,可能很多同学知道这个方法,因为它就是一个简单的定时函数,我们看一下它的用法

setInterval(function(){ alert("Hello"); }, 3000);

这句代码就是每过3秒执行一次该方法,弹出一个“hello”。

好了,理解了前面的两个方法,那么下面的代码你一定可以看懂得。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>滚动公告栏</title>
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <style type="text/css">
    body{padding: 0;margin:0;background-color:#f9f9f9}
    .ul1{list-style: none;margin: 0}
    li{padding: 5px;}
  </style>
</head>
<body>
<div style="height: 60px;background-color: #191e29;">
  <p style="margin: 0;color: #fff;line-height: 60px;text-align: center;">这是用jQuery实现的上下滚动公告栏</p>
</div>
<div style="background-image: url(timg.jpg); margin:15px 90px 0 90px;padding-left: 310px; height: 600px;">
  <div style="position: relative;height: 26px;overflow: hidden;">
    <ul class="ul1">
      <li>K先生:我求求你嫁给我</li>
      <li>K先生:等你老了,我依然背着你</li>
      <li>K先生:我给你当拐杖</li>
      <li>K先生:等你没牙了,我就嚼碎了再喂给你吃</li>
    </ul>
    <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png">
  </div>
</div>
<script type="text/javascript">
  $(function(){
    var num=$(".ul1").find("li").length;
    console.log("直接运行"+num);
    if (num>1) {
      setInterval(function(){ 
      $('.ul1').animate({
        marginTop:"-26px"
      },500,function(){
        $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
      });
    }, 3000);
    }
        
  });
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的jQuery实现上下滚动公告栏详细代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
You might like
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
用户注册常用javascript代码
2009/08/29 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
python中遍历文件的3个方法
2014/09/02 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python分布式环境下的限流器的示例
2017/10/26 Python
django+mysql的使用示例
2018/11/23 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
工作表现评语
2014/01/19 职场文书
保健品市场营销方案
2014/03/31 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
团队拓展训练感想
2015/08/07 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书