`

jquery实现滚动新闻

 
阅读更多

效果如下:

源码如下:

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Try JQuery</title>
		<link rel="stylesheet" href="styles/main.css" type="text/css" />
	</head>
	<body>
		<div id="main_container">
			<h3>最新动态</h3>
			<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>
		</div>
		<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="scripts/main.js" type="text/javascript"></script>
	</body>
</html>

styles/main.css

/*
 base css
*/

* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style: none outside none;
}

.clear {
	clear: both;
}

/*
 page css
*/

#main_container {
	background-color: #eeeeee;
	width: 960px;
	margin: 0 auto;
}

.scrollnews {
	width: 200px;
	height: 85px;
	overflow: hidden;
	background-color: yellow;
}

.scrollnews ul li {
	position: relative;
}

#scrollnews ul li a {
	display: block;
	background: #eeeeee;
	font-weight: 700;
}

#scrollnews ul li a:hover {
	background: none;
	color: red;
}

scripts/main.js

$(function(){
	var scrollNews = function( 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);
		})
	}
	var $this = $(".scrollnews");
	var scrollTimer;
	$this.hover(function(){
			clearInterval(scrollTimer);
		},function(){
			scrollTimer = setInterval(function(){
			scrollNews( $this );
		}, 3000 );
	}).trigger("mouseleave");
});

 

  • 大小: 16.1 KB
分享到:
评论

相关推荐

    jQuery实现滚动新闻代码.zip

    本项目“jQuery实现滚动新闻代码”利用jQuery的灵活性和强大的功能,结合Bootstrap 3框架,创建了一个响应式的新闻滚动效果。Bootstrap 3是Twitter推出的一个开源前端框架,它提供了丰富的预设样式、组件和...

    滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片

    本文将深入探讨如何利用jQuery实现滚动新闻和滚动图片,并提供相关的知识点。 一、jQuery基础 1. jQuery选择器:jQuery提供了简洁且强大的CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),...

    用Jquery实现滚动新闻

    此文主要用Jquery实现滚动新闻,如此少的代码就能实现这个功能真的是不由得感叹Jquery的强大功能。 代码如下: &lt;&#37;@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=...

    jQuery实现滚动新闻特效代码

    **jQuery实现滚动新闻特效代码详解** 在Web开发中,动态滚动新闻是一种常见的功能,它可以吸引用户的注意力并展示最新的信息。本篇文章将详细讲解如何使用jQuery来实现这一效果,特别是结合Bootstrap 3框架来创建...

    jQuery实现列表自动滚动循环滚动展示新闻

    3. jQuery实现滚动功能:首先在jQuery的$(function() {})内定义局部变量$this来引用新闻滚动容器的jQuery对象。然后通过$.hover()方法为容器添加鼠标悬停事件,当鼠标悬停时调用 clearInterval() 来清除滚动定时器,...

    jquery垂直向上逐条滚动新闻列表

    本项目"jquery垂直向上逐条滚动新闻列表"就是利用jQuery来实现一种动态效果,使新闻列表能以垂直向上的方式逐条滚动,提升用户的浏览体验。这种效果常见于新闻网站或信息展示页面,可以有效地展示大量的信息而不占据...

    jQuery滚动公告

    jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告

    jQuery实现新闻列表滚动特效代码.zip

    在这个“jQuery实现新闻列表滚动特效代码”的压缩包中,我们可以期待找到一个利用jQuery创建动态新闻列表滚动效果的示例代码。这种特效通常用于网站的首页或者新闻板块,以吸引用户注意力并提供流畅的用户体验。 ...

    单行jQuery循环滚动新闻代码.rar

    综上所述,这个压缩包中的代码提供了一种使用jQuery实现的单行新闻标题循环滚动的解决方案,涉及到了前端开发中的多个重要知识点,包括JavaScript特效、DOM操作、动画制作以及用户体验优化等。对于网页设计师和前端...

    【经典】滚动新闻_Jquery

    【经典】滚动新闻_Jquery 是一个利用JavaScript库Jquery实现的动态新闻展示方案,它主要关注于创建一种吸引用户注意力的交互式体验。在网页设计中,滚动新闻是一种常见的元素,用于显示最新的更新、公告或者热门资讯...

    jquery上下滚动插件

    而`scrollQ.js`是实际的插件脚本文件,包含了实现滚动效果的逻辑代码。开发者可以通过查看和修改这两个文件来理解和定制插件,以适应自己的项目需求。 总的来说,jQuery上下滚动插件通过简单易用的API和良好的...

    jQuery左右滚动。

    标题中的“jQuery左右滚动”指的是使用JavaScript库jQuery实现的一种页面元素水平滚动的特效。这种特效常见于新闻资讯网站、产品展示区域或者轮播图组件,可以让用户方便地浏览横向排列的多个项目。 在jQuery中,...

    jQuery实现滚动效果

    jQuery作为一个强大的JavaScript库,因其简洁的API和丰富的功能,被广泛用于实现各种交互效果,包括标题中提到的“jQuery实现滚动效果”。这种效果主要分为两类:轮播效果和上下文字滚动效果。 首先,我们来详细...

    jquery 文字向上滚动

    3. **定时器(setTimeout或setInterval)**:用于定时更新文字位置,实现滚动效果。 4. **动画(animate)**:jQuery的动画函数可以平滑地改变元素的属性,如位置、大小等,让滚动看起来更加自然。 5. **事件监听**...

    jquery新闻上下滚动.txt

    运用jquery实现新闻上下滚动,鼠标覆盖时新闻停留不滚动。

    jquery双重滚动特效.zip

    在实际项目中,"jQuery双重滚动特效"常用于产品展示、新闻轮播等场景。通过熟练掌握其原理和实现方式,开发者可以灵活运用到各种网页设计中,提升网页的交互性和观赏性。 总结,jQuery双重滚动特效是基于jQuery库的...

    jquery实现自动滚动

    ### 使用jQuery实现自动滚动效果 在现代Web开发中,动态元素和交互式用户界面变得越来越重要。其中之一就是自动滚动效果,这种效果常用于新闻站点、博客或者电子商务网站中展示最新的文章或产品信息。本文将详细...

    jQuery无缝滚动

    使用jQuery实现无缝滚动的关键步骤 ### 2.1 引入jQuery库 在HTML文件中,首先需要引入jQuery库。可以通过CDN(内容分发网络)链接或者本地文件引用: ```html &lt;script src="https://code.jquery....

    jQuery新闻滚动插件Newstickerpro

    Newstickerpro是基于jQuery的一个强大且灵活的新闻滚动插件,特别适用于创建吸引用户的实时更新展示区,如网站头条、公告或滚动新闻条。 该插件的主要功能和特点包括: 1. **自定义样式**:Newstickerpro允许...

Global site tag (gtag.js) - Google Analytics