基于JQuery打造无缝滚动新闻步骤详解


Posted in Javascript onMarch 31, 2016

本文实例讲述了基于JQuery打造无缝滚动新闻的方法。分享给大家供大家参考,具体如下:

首先,我们这里有这么一段html代码,很简洁,如下所示:

<ul>
<li>你说我是好人吗,我是好人啊</li>
<li>哈哈,我真的不知道说什么了</li>
<li>生活就是应该平淡的</li>
<li>像上学一样的工作</li>
</ul>
</div>

然后我们要做的就是使它无缝滚动。

首先我们引入进入JQuery,并且获取到li元素列表中的第一个元素中的内容

这里我们使用的是clone()方法来获取,然后显示其内容:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#tag li').eq(0).click(function(){
   alert($(this).clone().text());
   //显示的结果是“你说我是好人吗,我是好人啊” 代表是第一个li元素的文本内容
});
</script>

然后就是显示所有的li元素的列表内容,这里我们利用parent()方法来获取所有li元素的列表内容:

<script type="text/javascript">
$(document).ready(function(){
  $('#tag li').eq(0).fadeOut("slow",function(){
   //alert($(this).clone().text());// 显示的结果是“你说我是好人吗,我是好人啊” 代表是第一个li元素的文本内容 
   alert($(this).parent().text());// 显示的结果是四个li元素之间的内容
});
</script>

接下来要做的就是将获取到的第一条li元素中的内容追加到所有li元素列表内容的后面:

<script type="text/javascript">
$(document).ready(function(){
  $('#tag li').eq(0).fadeOut("slow",function(){
   //alert($(this).clone().text()); 显示的结果是“你说我是好人吗,我是好人啊” 代表是第一个li元素的文本内容 
   //alert($(this).parent().text()); 显示的结果是四个li元素之间的内容
   $(this).clone().appendTo($(this).parent()); //可以看到页面中第一个li元素被自动添加到了第四个li元素的末尾
});
</script>

接到上面,继续要做的就是让第一个li元素给隐藏掉,做法如下:

<script type="text/javascript">
$(document).ready(function(){
  $('#tag li').eq(0).fadeOut("slow",function(){
   //alert($(this).clone().text());  显示的结果是“你说我是好人吗,我是好人啊” 代表是第一个li元素的文本内容 
   //alert($(this).parent().text());  显示的结果是四个li元素之间的内容
   // alert($(this).clone().appendTo($(this).parent()).text()); 可以看到页面中第一个li元素被自动添加到了第四个li元素的末尾
   $(this).clone().appendTo($(this).parent()).fadeIn("slow");
  });
});
</script>

最后利用setInterval('scroll_news()',1000);反复调用即可

最终完整代码如下:

<script type="text/javascript">
function scrollNews(){
$(document).ready(function(){
  $('#tag li').eq(0).fadeOut("slow",function(){
   $(this).clone().appendTo($(this).parent()).fadeIn("slow");
   $(this).remove();
  });
});
}
setInterval('scrollNews()',1000);
</script>

其实,一步一步的来,最终会得到结果的

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
Javascript中神奇的this
Jan 20 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 #Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 #Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 #Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 #Javascript
JS判断元素是否在数组内的实现代码
Mar 30 #Javascript
javascript检查某个元素在数组中的索引值
Mar 30 #Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 #Javascript
You might like
DISCUZ 分页代码
2007/01/02 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
web前端开发也需要日志
2010/12/09 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python3调用R的示例代码
2018/02/23 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python字符串的拼接方法总结
2019/11/18 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
建筑总经理岗位职责
2014/02/02 职场文书
高中英语教学反思
2014/02/04 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
西安大雁塔导游词
2015/02/10 职场文书
入党转正申请报告
2015/05/15 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记