基于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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
Python去除、替换字符串空格的处理方法
2018/04/01 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
什么是数据抽象
2016/11/26 面试题
前台文员岗位职责
2013/12/28 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
民间个人借款协议书
2014/09/30 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
php引用传递
2021/04/01 PHP
Python图片检索之以图搜图
2021/05/31 Python
react 项目中引入图片的几种方式
2021/06/02 Javascript
MySQL窗口函数的具体使用
2021/11/17 MySQL
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python