基于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 判断日期格式是否正确的实现代码
Jul 04 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python中的zipfile模块使用详解
2015/06/25 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
weblogic面试题
2016/03/07 面试题
车间副主任岗位职责
2013/12/24 职场文书
先进个人获奖感言
2014/01/24 职场文书
个人借款担保书
2014/04/02 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android