基于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系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
js调试系列 初识控制台
Jun 18 Javascript
js实现文字截断功能
Sep 14 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
Vue 实例事件简单示例
Sep 19 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
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
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python k-近邻算法实例分享
2014/06/11 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python模块常用四种安装方式
2020/10/20 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
2015年元旦活动总结
2014/05/09 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
部队个人年终总结
2015/03/02 职场文书
刮痧观后感
2015/06/05 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
经营场所证明范本
2015/06/19 职场文书
学校教代会开幕词
2016/03/04 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Vue如何清空对象
2022/03/03 Vue.js