`
WXQ2000
  • 浏览: 28693 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery教程:一款很实用的无缝滚动新闻列表

阅读更多
最近在看jQuery,刚开始还看的很懂,越往后越难哦!!
要加油的研究哦!!

css样式:
.scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;margin:5px 15px;}
.scrollNews ul li a{ display:block; line-height:22px; color:#3366CC; text-decoration:none;}
.scrollNews ul li a:hover{ text-decoration:underline;}


html代码
<div class="scrollNews">
			<ul>
					<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
					<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
					<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
					<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
					<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
					<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
					<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
			</ul>
			</div>


js文件
/*新闻滚动*/
$(function(){
        var $this = $(".scrollNews");
		var scrollTimer;
		$this.hover(function(){
			  clearInterval(scrollTimer);
		 },function(){
		   scrollTimer = setInterval(function(){
						 scrollNews( $this );
					}, 3000 );
		}).trigger("mouseleave");
});
function scrollNews(obj){
   var $self = obj.find("ul:first"); 
   var lineHeight = $self.find("li:first").height(); //获取行高
   $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
         $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
   })
}
分享到:
评论

相关推荐

    jquery 无缝滚动 demo

    总结,实现jQuery无缝滚动效果并不复杂,只需理解其基本原理,并结合jQuery的动画功能,即可轻松创建出具有吸引力的网页动态效果。通过不断优化和扩展,可以让这个效果更加丰富多彩,满足不同场景的需求。

    Jquery 无缝滚动

    在本文中,我们将深入探讨jQuery无缝滚动的实现原理、兼容性和应用实例。 ### 一、实现原理 jQuery 无缝滚动的核心在于利用JavaScript和CSS来控制页面元素的位置变化。通过定时器定期改变元素的CSS属性,例如`top`...

    jquery无缝滚动

    **jQuery无缝滚动**,也称为无限滚动或自动轮播,是一种网页设计中常见的效果,用于在有限的空间内展示大量的内容,如新闻、图片或产品列表。这种效果通过使用JavaScript库jQuery来实现,使得内容能够在用户的视线中...

    使用Jquery实现简单的无缝滚动(可动态)

    【标题】:使用jQuery实现简单的无缝滚动(可动态) 在Web开发中,为了提升用户体验,无缝滚动已经成为一种常见的页面元素滚动效果。它使得用户在浏览长列表或内容时,能够平滑、连续地查看信息,而无需等待内容...

    无缝循环滚动插件

    无缝循环滚动插件是一种网页动态效果技术,常用于展示新闻、产品列表或轮播图等,为用户提供连续不间断的浏览体验。基于jQuery实现的此类插件利用了jQuery库的强大功能和简洁API,使得开发者能够轻松地创建出平滑、...

    文字列表无缝向上滚动

    然后,使用jQuery来实现无缝滚动效果。这里可以使用`setInterval`函数来定时改变列表的`top`值,模拟向上滚动的效果。例如: ```javascript $(function() { var list = $('.scroll-list'); var speed = 5; // ...

    table无限循环无缝滚动.zip

    在网页设计和开发中,有时候我们需要展示大量的数据,如新闻列表、活动公告或者产品目录,这时采用表格形式是常见的选择。然而,如果数据过多,滚动浏览可能会变得繁琐。"table无限循环无缝滚动"是一个功能,它能够...

    jQuery实现新闻头条文字无缝滚动特效源码.zip

    jQuery是一种广泛应用于网页...它提供了一个很好的实践平台,帮助开发者理解和掌握如何用jQuery来增强网页的动态性和互动性,特别是对于新闻标题这类需要持续更新和展示的信息,这种无缝滚动特效是一个非常实用的工具。

    jquery竖向的图文列表无缝循环滚动特效类似微博文字滚动.zip

    【标题】"jQuery竖向的图文列表无缝循环滚动特效类似微博文字滚动"涉及的核心技术是JavaScript库jQuery,以及实现动态滚动效果的编程技巧。在网页设计中,这种特效可以为用户提供更加生动、吸引人的信息展示方式,...

    jquery实现的向上无缝循环滚动的新闻效果.zip

    8. **JavaScript编程技巧**:在实现无缝滚动时,还需要考虑如何处理边界条件,比如当最后一个项目到达顶部时如何将其替换为第一个项目。这可能涉及到数组操作或DOM元素的插入和移除。 9. **性能优化**:由于这种...

    jQuery 多功能无缝滚动插件

    在提供的文件名列表中,我们看到一个名为 `marquee.js` 的文件,这很可能就是实现无缝滚动效果的JavaScript代码。在实际应用中,`marquee.js` 可能包含了以下关键部分: 1. **初始化函数**:这个函数通常会在页面...

    jquery无缝向上滚动实现代码教程共29页.pdf.zi

    标签“jquery无缝向上滚动实现代码”表明本教程将涵盖具体的代码示例,帮助开发者理解如何将理论转化为实践。教程中的29页内容预计将详细解释每一步操作,并提供完整的代码片段供学习者参考和实践。 总的来说,...

    html中的无缝滚动

    HTML中的无缝滚动是一种常见的网页设计技术,用于在页面上创建连续、流畅的视觉效果,使得内容像一个无尽的循环一样滚动。这种效果通常应用于新闻更新、产品展示或轮播图等场景,能够吸引用户的注意力并提升用户体验...

    html无缝滚动实例

    HTML无缝滚动是一种网页设计技术,它使得网页中的内容如图片、文字或列表等能够不间断地、平滑地从一端滚动到另一端,为用户提供连续且流畅的视觉体验。这种效果常见于新闻滚动条、产品展示区或者轮播图等元素中,...

    JQ 最少代码实现无缝滚动

    在网页设计中,为了提供用户更好的浏览体验,无缝滚动效果常被用于长列表或者图片展示。JQuery(简称JQ)作为一个轻量级、功能丰富的JavaScript库,提供了简单易用的API来实现这种效果。本文将详细介绍如何使用JQ...

    DIV无缝滚动

    在网页设计中,"DIV无缝滚动"是一种常见的视觉效果,用于展示内容时创造连续、平滑的滚动体验。这种效果通常结合HTML的`&lt;div&gt;`元素、JavaScript(JS)和jQuery库来实现,使得信息或者图片能够像一个无限循环的列表...

    基于jquery的无缝循环新闻列表插件

    基于jQuery的无缝循环新闻列表插件是一种利用jQuery库实现的网页前端插件,主要用于在网页中创建一个能够不断循环展示新闻或信息列表的功能。这种插件通常用于新闻网站或者需要展示滚动内容的网页中,以达到内容动态...

    仿新浪微博高度自适应无缝滚动

    在网页设计中,实现“仿新浪微博高度自适应无缝滚动”的效果是一种常见的动态展示技术,它主要用于展示大量的内容,如微博、新闻或者评论等,让用户在有限的屏幕空间内浏览到更多的信息。这种滚动方式能够提供良好的...

    jquery简单实现纵向的无缝滚动代码实例

    jquery实现纵向无缝滚动是一种常见的前端动态效果,尤其适用于新闻滚动、公告滚动、商品滚动展示等场景。传统的滚动效果是在页面上显示一个滚动区域,内容按一定速度从一端滚动到另一端。然而,这种传统的滚动方式在...

Global site tag (gtag.js) - Google Analytics