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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现购物车全功能
Jan 11 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php字符串过滤与替换小结
2015/01/26 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php商品对比功能代码分享
2015/09/24 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python 实现二维列表转置
2019/12/02 Python
pygame实现飞机大战
2020/03/11 Python
jupyter notebook 多行输出实例
2020/04/09 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
元旦晚会感言
2014/03/12 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
火烧圆明园观后感
2015/06/03 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python