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,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...
随机推荐
- js处理url中的请求参数(编码/解码)
在处理 a 链接跳转其他页面时,总会遇到需要传递一些当前页面的信息到其他页面,然后其他页面利用这些信息进行相关操作.利用 get 请求或 hash 传递是常见的方式. 首先,需要对传递的参数进行编码, ...
- git 查看提交记录
查看提交的内容 -p 选项,同时在 - 后加数字限制一下数目 git log -p -2. commit 500eeadd71a21f1166803e12a792bfa86f4ca784 (HEAD ...
- Tomcat发生java.lang.OutOfMemoryError: PermGen space的解决方案
产生该问题的主要原因是JVM永久带空间不足导致的,可以在环境变量CATALINA_OPTS中提高MaxPermSize参数值 set CATALINA_OPTS = -XX:PermSize=12 ...
- 常用chrome插件&&常用FireFox插件
第一部分:chrome插件 chrome中输入 chrome://chrome-urls/ 可以得到包括缓存在内的很多相关信息. 1.掘金chrome插件 点击下载 掘金是一个高质量的互联网技术 ...
- Sublime Text 3编辑器的SublimeRPEL快捷键设置
Sublime Text 3软件由于每次运行程序都要执行:Tools -> SublimeREPL -> Python -> RUN current file 菜单有点麻烦,所以现在 ...
- CS231n学习笔记-图像分类笔记（下篇）
原文地址:智能单元 K-Nearest Neighbor分类器 大家可能注意到了,为什么只用最相似的一张图片的标签来作为测试图像的标签呢?这不是很奇怪吗!是的,使用K-Nearest Neighbor ...
- http编程（一）使用javaAPI实现
Java Http编程中常见的实现方式是使用Java 提供的API,另外就是使用Apache提供的 API 1.通过Java提供的API实现Http编程 类:URL:类 URL 代表一个统一资源定位符 ...
- 机器学习--聚类系列--DBSCAN算法
DBSCAN算法 基本概念:(Density-Based Spatial Clustering of Applications with Noise) 核心对象:若某个点的密度达到算法设定的阈值则其为 ...
- ggplot2基础学习
前言 ggplot2是R语言最流行的第三方扩展包,是RStudio首席科学家Hadley Wickham读博期间的作品,是R相比其他语言一个独领风骚的特点.包名中“gg”是grammar of gra ...
- Boosting和Bagging的异同
二者都是集成学习算法,都是将多个弱学习器组合成强学习器的方法. 1.Bagging (主要关注降低方差) Bagging即套袋法,其算法过程如下: A)从原始样本集中抽取训练集.每轮从原始样本集中使用 ...