jQuery实现动态向上滚动


Posted in jQuery onDecember 21, 2020

本文实例为大家分享了jQuery实现动态向上滚动的具体代码,供大家参考,具体内容如下

总结:概括滚动的新闻、字幕、图片:两个最核心功能 :

1、”永动“(infinite)

2、循环

js实现”永动“(infinite) 的实现方法离不开定时器setInterval(),也就是说每过一段时间都要执行一次某个函数,从而实现无休止滚动;

而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()等等好多种方法。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动态向上滚动</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
 margin:0;
 padding:0;
}
body {
 font-family:'microsoft yahei';
 background:#fff;
 overflow:hidden;
}
#demo1,#demo2 {
 width:1000px;
 height:40px;
 line-height:30px;
 margin:50px auto;
 overflow:hidden;
 background:#f60;
 color:#fff;
 padding:10px;
 box-sizing:border-box;
}
#demo2 {
 height:90px;
}
#demo2 a {
 display:block;
 text-decoration:none;
 color:#fff;
}
#demo3 {
 width:1000px;
 height:400px;
 overflow:hidden;
 background:#f60;
 color:#fff;
 margin:50px auto;
 padding:10px;
 box-sizing:border-box;
}
</style>
</head>
<body>
<!-- demo示例一 -->
<div id="demo1">
 <div class="demo">
 <div class="con">
 向幸福生活致敬111!
 </div>
 <div class="con">
 向幸福生活致敬222!
 </div>
 <div class="con">
 向幸福生活致敬333!
 </div>
 <div class="con">
 向幸福生活致敬111!
 </div>
 </div>
</div>
<!-- demo示例二 -->
<div id="demo2">
 <a href="#" >第一条新闻</a>
 <a href="#" >第二条新闻</a>
 <a href="#" >第三条动态</a>
</div>
<!-- demo示例三 -->
<div id="demo3" style="overflow:hidden;height:200px;">

 <div id="dl">

 <p>恭喜133****1062用户获得10元手机话费</p>

 <p>恭喜153****0792用户获得50元助学代金券</p>

 <p>恭喜153****3890用户获得330元上课大礼包</p>

 <p>恭喜189****0883用户获得330元上课大礼包</p>

 <p>恭喜133****6823用户获得1500元现金</p>

 <p>恭喜153****5050用户获得330元上课大礼包</p>
 </div>
 </div>

<script>

 //总结:3种方法都离不开定时器setInterval(),也就是说每过一段时间都要执行一次某个函数,从而实现无休止滚动
 //而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()


$(function() {
 // demo示例一
 setInterval('autoScroll("#demo1")', 1000);

// demo示例一函数
function autoScroll(obj) {


 $(obj).find(".demo:first").animate({




 marginTop: "-20px"



 }, 500, function() {




 $(this).css({
 marginTop: "0px"
 }).find(".con:first").appendTo(this);
//函数appendTo()把第一个挪到最后一个


 });


};

 // demo示例二

 $('#demo2 a:first').siblings().hide();
 setInterval(function() {
 $('#demo2 a:visible').slideUp('slow', function() {
 $(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");
 });
 }, 1000 * 2)
});

// demo示例三
var drawLetters = document.getElementById("demo3");


var dl = document.getElementById("dl");


var speed = 20; //滚动速度值,值越大速度越慢



function Marquee() {



 drawLetters.scrollTop++;



 var newNode = document.createElement("div");



 newNode.innerHTML = dl.innerHTML;



 drawLetters.insertBefore(newNode, null);


}


var MyMar = setInterval(Marquee, speed); //设置定时器</script>
</body>
</html>

再为大家分享一段之前收藏的代码:jQuery文字逐行向上滚动代码:

实现原理:整体向上滚动一行距离后,将第一行appendTo最后一行

<div class="apple">
 <ul>
 <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> 
  <li><a href="#" target="_blank">怎么爱你都不嫌多</a></li> 
  <li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li> 
  <li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li> 
  <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> 
  <li><a href="#" target="_blank">就像天边最美的云朵</a></li> 
  <li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li> 
  <li><a href="#" target="_blank">种下希望就会收获</a></li> 
 </ul> 
</div>
<script type="text/javascript"> 
 function autoScroll(obj){ 
 $(obj).find("ul").animate({marginTop : "-39px"},500,function(){ 
 $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); 
 }) 
 } 
 $(function(){ 
 setInterval('autoScroll(".apple")',2000); 
 }) 
 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现视频展示效果
May 30 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
简单了解python的break、continue、pass
2019/07/08 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
社区活动邀请函范文
2014/01/29 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
小学庆六一活动总结
2014/08/28 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL