<!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>
分享到:
相关推荐
JS图片上下切换效果JS图片上下切换效果JS图片上下切换效果
基于Delphi的图片上下切换效果,实现从上向下填充和从下向上填充,类似播放幻灯片的功能,可作为一些图像处理程序的模块来用。
android150种图片切换特效 演示 无源码
上下切换图片效果,非常不错,不信下载试试,也很好操作和使用
一款基于jQuery CSS3实现的3D图片上下翻牌切换效果,支持按钮切换和鼠标滚动切换,也能自动切换。
手机端网页上下手指滑动图片切换效果代码!
zepto.js手机端网页上下手指滑动图片切换效果代码,兼容各种手机屏幕实现音乐播放,图片上下滑动。
上下切换图片banner效果逻辑简单,易于修改,适用网页风格较广,一款不错的图片轮换特效! 上下切换图片banner效果演示图一: 点击查看演示 上下切换图片banner效果演示图二:
jquery hover鼠标悬停触动图片和文字上下滑动切换效果
这个效果,你也可以说是图片翻页吧,也可以说是一个图片轮显,基于HTML5...如果在手机上测试,那就是手向上滑或向下滑,图片一张一张翻页,可以修改成左右翻页切换那种,上下切换好像不常见,可为你提供一个参考吧。
有很多切换效果 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除。 8 : 纵向百叶窗转换。 9 : 横向百叶窗转换...
3D图片上下翻牌切换效果支持按钮切换和鼠标滚动切换.zip
用Delphi实现上下展开的图片切换效果..rar
图片上下切换效果,学习jquery的朋友可以参考下。
完整版图片切换效果 网页上流行的三张图片上下切换的js脚本!
带前后翻页的JS图片切换效果 上下页翻页
背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。支持所有新版浏览器;支持单张或者多张图片。
原生js代码制作首页焦点图片广告上下滚动轮播切换
jQuery制作鼠标悬浮图片上下滚动切换展示效果