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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery replace方法去空格
May 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
使用php实现截取指定长度
2013/08/06 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python发送email的3种方法
2015/04/28 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
携程英文网站:Trip.com
2017/02/07 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
创业女性典型材料
2014/05/02 职场文书
银行求职自荐信
2014/06/30 职场文书
委托培训协议书
2014/11/17 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python