`
网上游龙
  • 浏览: 3360 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

8行代码实现的新浪微博滚屏特效-jQuery plugin

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.loop-scroll-demo {
  height: 600px;
  width: 600px;
  overflow: hidden;
}

.loop-scroll-demo div {
  height: 100px;
  margin: 5px;
  background-color: gray;
  text-align: center;
  font-size: 3em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	/*
	插件实现
	@author wanglong
	copyright zhongsou.com
	*/
	$.fn.loopScroll = function() {
		return this.each(function() {
			var _interval = 0, self = $(this).hover(function() {clearInterval(_interval);}, function() {
				_interval = setInterval(function() {
					var last = self.children(":last"), height = last.height();
					last.css({ height : 0, opacity : 0 }).prependTo(self).animate({ height : height }, 400, function() {
						last.animate({ opacity : 1 }, 400);
	});}, 2000);}).mouseleave();});};
	/*调用插件方法*/
	$(function() {
		$(".loop-scroll-demo").loopScroll();
	});
</script>
</head>
<body>
	<div class="loop-scroll-demo">
		<div>微博01</div>
		<div>微博02</div>
		<div>微博03</div>
		<div>微博04</div>
		<div>微博05</div>
		<div>微博06</div>
		<div>微博07</div>
		<div>微博08</div>
		<div>微博09</div>
		<div>微博10</div>
		<div>微博11</div>
		<div>微博12</div>
		<div>微博13</div>
		<div>微博14</div>
		<div>微博15</div>
		<div>微博16</div>
		<div>微博17</div>
		<div>微博18</div>
		<div>微博19</div>
		<div>微博20</div>
	</div>
</body>
</html>
0
0
分享到:
评论

相关推荐

    struts2-jquery-plugin-3.1.0.jar

    struts2-jquery-plugin-3.1.0.jar

    struts2-jquery-plugin-2.0.0

    struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0

    struts2-jquery-plugin使用手册,自己写的

    Struts2-jQuery-Plugin是基于Struts2框架的一个扩展插件,它为开发者提供了丰富的jQuery UI组件,使得在Struts2应用中实现交互式的用户界面变得更加便捷。这个使用手册将详细阐述如何集成并利用该插件提升Web应用的...

    struts2-jquery-plugin插件3.3.3

    最新的struts2-jquery-plugin插件3.3.3,包括jquery-ui和grid,使用标签实现。

    前端项目-Iframe-Height-Jquery-Plugin.zip

    针对这一问题,`前端项目-Iframe-Height-Jquery-Plugin` 提供了一个解决方案。 这个jQuery插件的主要功能是自动检测并设置Iframe的高度,确保内容完整显示,同时解决了跨域通信的问题。跨域问题通常发生在iframe...

    autoSave - jQuery Plugin

    Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/

    struts2-jquery-plugin

    struts2 jquery plugin ,学习struts2 ,又希望在其中使用Jquery的朋友,不妨看看

    promptuMenu - jQuery Plugin

    "promptuMenu - jQuery Plugin" 是一个基于jQuery的插件,专为网页菜单设计和交互增强而开发。这个插件的目的是提供一种简单且高效的方式来创建动态、响应式的下拉菜单,以提升用户体验并增强网站的导航功能。下面将...

    simple jQuery date-picker plugin 使用

    jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来实现这些功能,其中“simple jQuery date-picker plugin”就是一个简单易用的选项。本文将详细介绍如何使用这个插件以及它的核心功能。 首先,我们需要理解...

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin for autocomplete - jQuery自动完成插件

    JavaEE源代码 struts2-spring-plugin-2.0.11

    JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-...

    前端项目-jquery-fullscreen-plugin.zip

    前端项目-jquery-fullscreen-plugin,这个jquery插件提供了一个简单易用的机制来控制现代浏览器的新全屏模式。目前只有更新的基于webkit的浏览器(如chrome)和firefox提供了这个新的全屏功能。

    simpleTab - jQuery Plugin

    Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/

    jonpauldavies-jquery-pager-plugin-aa0c5b4.zip

    在使用过程中,开发者需要将下载的jonpauldavies-jquery-pager-plugin-aa0c5b4.zip解压,其中包含的主要文件可能有以下几种: 1. `jquery.pager.js`:这是核心的JavaScript文件,实现了分页逻辑和交互。 2. `jquery...

    struts2-jquery-plugin-3.6.1.jar

    struts2-jquery-plugin

    jQuery摄像头插件jquery-webcam-plugin

    `jQuery webcam plugin`是一个优秀的JavaScript库,它利用jQuery框架实现了与浏览器摄像头的交互,让用户无需离开页面即可拍摄并处理照片。 该插件的核心特性包括: 1. **易用性**:基于jQuery的API设计使得该插件...

    struts2-jquery-plugin-3_7_1

    struts2-jquery-plugin jar文件

    scrollToTop - jQuery Plugin

    通过使用jQuery,开发者可以编写更少的代码来实现更多的功能。 ## 2. scrollToTop插件的安装与引入 首先,你需要在HTML文件中引入jQuery库,这可以通过CDN链接或者本地文件的方式进行。接着,下载`scrollToTop`...

    Maven使用tomcat8-maven-plugin插件.docx

    Tomcat 是一个流行的 Web 服务器,Maven 提供了一个插件 tomcat8-maven-plugin 来实现 Maven 项目与 Tomcat 服务器的集成。下面我们将详细介绍如何使用 tomcat8-maven-plugin 插件。 tomcat8-maven-plugin 插件的...

    struts2-json-plugin-2.3.24-API文档-中文版.zip

    赠送jar包:struts2-json-plugin-2.3.24.jar; 赠送原API文档:struts2-json-plugin-2.3.24-javadoc.jar; 赠送源代码:struts2-json-plugin-2.3.24-sources.jar; 赠送Maven依赖信息文件:struts2-json-plugin-...

Global site tag (gtag.js) - Google Analytics