jQuery实现的上下滚动公告栏详细讲解
之前做项目的时候，一直都想着做一个上下滚动的公告栏，作为展示网站的最新公告信息，因为刚开始自己的思路并不是太清晰，在网上找了很多的源码，但是却发现都不能让自己满意，有的还会出现一些小问题，比如，有时候公告上下滚动的时候，两条公告会重叠在一起。最后我还是决定自己写一个上下滚动的公告栏。
jQuery实现上下滚动公告栏原理
虽然在网上找的有些代码有时候会出现一些问题，但是思路咱还是可以借鉴一下的。
我们先来看一下，我做的上下滚动公告栏效果图，如果你感觉是你要的那款，那么你再接着往下看是怎么实现的。
图中箭头所指内容就是公告内容，它会不停的上下滚动，当然滚动时间可以自己设置的。
下面我们来看下是怎么实现的。
其实实现滚动效果主要用到jQuery中的animate() 方法，而animate() 方法就是创建动画效果，简单的说就是，当我们用js将“一棵树”的height属性从100px变为200px的时候，我们会看到“这个树”瞬间从100高度长到了200高度，但是我们用animate() 方法，我们会看到“这颗树”从100高度慢慢的长到200高度，我们可以看到这个过程，这就是animate() 方法的作用，当然“树”的生长速度是可以控制的。
了解了jQuery的animate()方法，我们还需要了解一下setInterval( )这个方法，可能很多同学知道这个方法，因为它就是一个简单的定时函数，我们看一下它的用法
setInterval(function(){ alert("Hello"); }, );
这句代码就是每过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>
如果你有更好得建议或者问题，欢迎下方留言哦。
本篇文章来自K先生的博客（有源码哦）。
jQuery实现的上下滚动公告栏详细讲解的更多相关文章
- JavaScript实现无缝滚动 原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
- jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件 开发能让所有的j ...
- （三）Jquery Mobile按钮详细讲解
Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示 1.HTML5中的button 效果: 2. JM中的普通button ...
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- Iframe 用法的详细讲解
1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...
- 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- 详细讲解nodejs中使用socket的私聊的方式
详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...
- iOS KVC详细讲解
iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...
随机推荐
- 使用VS Code开发.Net Core 2.0 MVC Web应用程序教程之一
好吧,现在我们假设你已经安装好了VS Code开发工具..Net Core 2.0预览版的SDK dotnet-sdk-2.0.0(注意自己的操作系统),并且已经为VS Code安装好了C#扩展(在V ...
- super()的作用
super能够用来訪问父类的构造方法和被子类所隐藏的方法.假设子类中有方法与父类中的方法名称和參数同样,则父类中的方法就被隐藏起来,也就是说在子类中重载了父类中的方法. 引用父类中所隐藏的语法格式例如 ...
- Adapter as a WCF Binding - In Depth
WCF LOB Adapter SDK surfaces an adapter as a custom WCF Binding. A WCF Bindingcorresponds to the “H ...
- iOS完全自学手册——［一］Ready？No！
1.前言 今天开始我会不定期写一些iOS自学的相关文章.毕竟,自己是自学开始,知道自学有哪些坑,知道自学对于开发欠缺什么,此外,加上现在的实际开发经验,希望能给自学的iOS开发者一些建议. 2.Rea ...
- 计算机上面常用的计算单位 & 个人计算机架构与接口设备
不多说,直接上干货! 计算机上面常用的计算单位 容量单位 速度单位 此网络常使用的单位为 Mbps 是 Mbits per second,亦即是每秒多少 Mbit. 个人计算机架构与接口设备 整个 ...
- javascript字符串拼接
var c='../Project/SelectPerson.aspx?personList='+'"'+personListValue+'"' X('Window2').x_sh ...
- docker “no space left on device”问题定位解决
在paas环境上使用docker加载镜像的时候出现了如下问题 第一反应应该是存储镜像的路径磁盘满了 docker info查看docker的根路径,可以看到为/opt/docker: 查看/opt/d ...
- LDAP落地实战（四）：Jenkins集成OpenLDAP认证
前几篇分文章分别介绍了OpenLDAP的部署管理和维护以及svn.git的接入,今天我们再下一城接入jenkins. 前情提要:LDAP系列文章 LDAP落地实战(一):OpenLDAP部署及管理维护 ...
- mongodb与关系型数据库优缺点比较
1.与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度②文档结构的存储方式,能够更便捷的获取数据③内置GridFS,支持大容量的存储.④内置Sharding.⑤第 ...
- Cocos2d-x游戏导出android工程，提取cocos的so文件
Cocos2d-x游戏导出android工程,提取cocos的so文件 原本cocos游戏的android工程编译时,需要将cocos的库文件进行编译,这些文件大部分是cpp文件, 使用ndk ...