<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>
分享到:
相关推荐
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是基于Struts2框架的一个扩展插件,它为开发者提供了丰富的jQuery UI组件,使得在Struts2应用中实现交互式的用户界面变得更加便捷。这个使用手册将详细阐述如何集成并利用该插件提升Web应用的...
最新的struts2-jquery-plugin插件3.3.3,包括jquery-ui和grid,使用标签实现。
针对这一问题,`前端项目-Iframe-Height-Jquery-Plugin` 提供了一个解决方案。 这个jQuery插件的主要功能是自动检测并设置Iframe的高度,确保内容完整显示,同时解决了跨域通信的问题。跨域问题通常发生在iframe...
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的朋友,不妨看看
"promptuMenu - jQuery Plugin" 是一个基于jQuery的插件,专为网页菜单设计和交互增强而开发。这个插件的目的是提供一种简单且高效的方式来创建动态、响应式的下拉菜单,以提升用户体验并增强网站的导航功能。下面将...
jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来实现这些功能,其中“simple jQuery date-picker plugin”就是一个简单易用的选项。本文将详细介绍如何使用这个插件以及它的核心功能。 首先,我们需要理解...
jQuery plugin for autocomplete - jQuery自动完成插件
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,这个jquery插件提供了一个简单易用的机制来控制现代浏览器的新全屏模式。目前只有更新的基于webkit的浏览器(如chrome)和firefox提供了这个新的全屏功能。
Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/
在使用过程中,开发者需要将下载的jonpauldavies-jquery-pager-plugin-aa0c5b4.zip解压,其中包含的主要文件可能有以下几种: 1. `jquery.pager.js`:这是核心的JavaScript文件,实现了分页逻辑和交互。 2. `jquery...
struts2-jquery-plugin
`jQuery webcam plugin`是一个优秀的JavaScript库,它利用jQuery框架实现了与浏览器摄像头的交互,让用户无需离开页面即可拍摄并处理照片。 该插件的核心特性包括: 1. **易用性**:基于jQuery的API设计使得该插件...
struts2-jquery-plugin jar文件
通过使用jQuery,开发者可以编写更少的代码来实现更多的功能。 ## 2. scrollToTop插件的安装与引入 首先,你需要在HTML文件中引入jQuery库,这可以通过CDN链接或者本地文件的方式进行。接着,下载`scrollToTop`...
Tomcat 是一个流行的 Web 服务器,Maven 提供了一个插件 tomcat8-maven-plugin 来实现 Maven 项目与 Tomcat 服务器的集成。下面我们将详细介绍如何使用 tomcat8-maven-plugin 插件。 tomcat8-maven-plugin 插件的...
赠送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-...