基于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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
jQuery事件详解
Feb 23 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
vue-cli随机生成port源码的方法
Sep 02 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php中static静态变量的使用方法详解
2010/06/04 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php socket通信简单实现
2016/11/18 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
介绍Python中的__future__模块
2015/04/27 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Pytorch之Variable的用法
2019/12/31 Python
2014迎新年晚会策划方案
2014/02/23 职场文书
运动会广播稿100字
2014/09/14 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
sql server 累计求和实现代码
2022/02/28 SQL Server