<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于jQuery的上下无缝滚动应用(单行或多行)</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
#demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
#demo ul{width:800px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
#demo li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
#demo {height:300px;overflow:hidden;}
</style>
<script>
$(function(){
//单行应用@Mr.Think
var _wrap=$("#demo");//定义滚动区域
var _interval=1000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('ul:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
</script>
</head>
<body>
<div id="demo">
<ul style=" width:800px; height:400px;">
<li style="float:left;"><img src="imgs/index_2.png"></li>
<li style=" float:left;"><img src="imgs/index-3.png"></li>
</ul>
<ul style=" width:800px; height:400px;">
<li style="float:left;"><img src="imgs/index_2.png"></li>
<li style="float:left;"><img src="imgs/index-3.png"></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何利用JavaScript实现图片上下切换效果。 首先，我们需要了解基本的HTML结构。一个简单的图片展示容器可能包含多个`<img>`标签，每个标签代表一张图片。通过CSS我们可以设定这些图片的初始状态，如...
在本文中，我们将深入探讨如何使用Delphi编程语言实现图片上下切换效果，这一功能常见于图像处理软件中，如幻灯片展示。Delphi是一种基于Object Pascal的集成开发环境（IDE），广泛用于创建桌面应用程序，尤其在图形...
本资源“android150种图片切换特效”提供了一套丰富的视觉效果，用于展示图片之间的过渡动画。虽然没有提供源代码，但是通过安装APK文件，开发者可以直观地观察到这些特效的实际表现，从而激发灵感，自行为自己的...
【jQuery多张叠加图片上下切换效果】是一种常见的网页动态展示技术，主要应用于产品展示、轮播图等场景，能够使用户界面更具吸引力。这个压缩包包含的代码是使用JavaScript库jQuery，结合CSS和HTML5来实现这一效果的...
"上下切换图片效果"是一种常见的交互设计方式，它在很多应用场景中都能看到，如相册浏览、产品展示、轮播广告等。这种效果允许用户通过简单的手势或点击来上下滚动查看图片，提供了一种直观且流畅的浏览体验。 首先...
标题中的“3D图片上下翻牌切换效果.zip”指的是一个包含3D视觉效果的图片展示技术，这种技术常用于创建动态、引人入胜的图片相册或展示应用。通过CSS3和JavaScript库jQuery实现，它能为用户带来立体、交互式的图片...
上下切换图片banner效果逻辑简单，易于修改，适用网页风格较广，一款不错的图片轮换特效！ 上下切换图片banner效果演示图一： 点击查看演示 上下切换图片banner效果演示图二：
在给定的文件名中，"Zepto.html"可能包含HTML结构，"css"可能包含了样式定义，"images"目录存储了待展示的图片，而"js"则包含实现滑动切换效果的JavaScript代码，可能使用了轻量级的JavaScript库Zepto，它是jQuery的...
这个效果，你也可以说是图片翻页吧，也可以说是一个图片轮显，基于HTML5...如果在手机上测试，那就是手向上滑或向下滑，图片一张一张翻页，可以修改成左右翻页切换那种，上下切换好像不常见，可为你提供一个参考吧。
本示例“jquery hover鼠标悬停触动图片和文字上下滑动切换效果”是利用jQuery实现的一种交互式用户体验，当用户将鼠标悬停在某个元素上时，相关的图片和文字会以上下滑动的方式进行切换，提升页面的动态感和吸引力。...
在网页设计中，图片切换效果是提升用户体验的重要手段之一，它可以吸引用户注意力并使页面更具动态感。这里我们将深入探讨标题“8种简单的图片切换效果”所涵盖的HTML、CSS和JavaScript技术，以及如何实现这些效果。...
在本文中，我们将深入探讨如何使用Delphi编程环境来实现一种独特的图片切换效果，即上下展开的动画过渡。Delphi是一款强大的对象 Pascal 编程工具，以其高效的VCL（Visual Component Library）框架著称，适合开发...
有很多切换效果 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除。 8 : 纵向百叶窗转换。 9 : 横向百叶窗转换...
1. 图片切换方式：常见的切换效果有淡入淡出、左右滑动、上下滑动等。这通常涉及CSS的`opacity`、`transform`属性以及`transition`属性的使用。 2. 动画库支持：许多JavaScript库，如jQuery、React、Vue等，提供了...
《jQuery网格图片切换效果详解及应用》 在网页设计中，动态、美观的图片展示方式总能吸引用户的注意力，提高用户体验。"jQuery网格图片切换效果"便是这样一种实用且具有吸引力的技术，它利用jQuery库的强大功能，...
完整版图片切换效果 网页上流行的三张图片上下切换的js脚本！
"图片重叠效果制作5张图片重叠切换效果代码" 是一种利用JavaScript实现的网页特效，旨在通过让多张图片在页面上重叠并进行平滑切换，来创造出独特的视觉体验。这种效果常见于网站的轮播图、产品展示或艺术作品展示等...
总的来说，通过结合HTML、CSS和jQuery，我们可以轻松创建一个具有上下滑动切换效果的图像幻灯片。这种方法不仅可以实现平滑的过渡，还能提供自定义的交互方式，使用户能够更好地参与到网页的体验中。当然，这只是一...