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手风琴的简单制作
May 12 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
使用jquery实现轮播图效果
Jan 02 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP高手需要要掌握的知识点
2014/08/21 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
信息技术培训感言
2014/03/06 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS