基于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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
JS变量及其作用域
2017/03/29 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python中 logging的使用详解
2017/10/25 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python hashlib模块实例使用详解
2019/12/24 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
技术人员面试提纲
2013/11/28 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
一年级学生期末评语
2014/04/21 职场文书
英语通知范文
2015/04/22 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫