jquery 滚动特效

下载了97站长网站的源码，实现的是商品滚动的效果，觉得有用，所以进行防止健忘记录。注释了js部分，主要是运用了setInterval（code，time） 和 clearInterval（null）来实现，间隔多少时间段去不间断执行code中的代码，code可以是函数等，然后调用clearInterval（）函数去取消，后者直接关闭窗口取消

其中觉得下面几句特别有用：

1.<pre name="code" class="html">/** 隐藏所有商品信息 显示第 lb_cur-1 项 **/
var products = $("#limit-buy .products").hide().eq(lb_cur-1).show();

2.

<pre name="code" class="html">$("#J-lb .btn-prev, #J-lb .btn-next").hide();

$("#J-lb .btn-prev, #J-lb .btn-next").show();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物网站jquery商品滚动展示效果 - 97站长网 - www.97zzw.com</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
</head><body><div class="headeline"></div><!--演示内容开始--><script type="text/javascript">
$(document).ready(function(){var lb = $("#limit-buy"),lb_cur = 1,lbp_w = lb.find(".products").width();lb_timer = null;t = 1;function showLimitBuyProducts(){/** 滚动下标 越界 重置 **/if(lb_cur < 1){lb_cur = 4;} else if(lb_cur > 4){lb_cur = 1;}/** 动态显示当前滚动到第几页 **/$("#J-lbcp").html(lb_cur);/** 隐藏所有商品信息 显示第 lb_cur-1 项 **/var products = $("#limit-buy .products").hide().eq(lb_cur-1).show(),/**有内容（长度不为0） 然后显示长度值 **/ta = products.find("textarea");if(ta.length){products.html(ta.val());}}/**setInterval() 方法以毫秒为单位，不停地执行函数 ，直到clearInterval()被调用，或者窗体关闭； 这里代表这个function每隔 1秒执行一次**/lb_timer = setInterval(function(){lb_cur++;showLimitBuyProducts();}, 1000);/** 上一页 **/$("#J-lbn .prev, #J-lb .btn-prev").click(function(){lb_cur--;showLimitBuyProducts();});/** 下一页 **/$("#J-lbn .next, #J-lb .btn-next").click(function(){lb_cur++;showLimitBuyProducts();});/** 悬挂在商品滚动区域进行停止 setInterval() 方法动作 **/$("#J-lb").hover(function(){/** 方法一 鼠标进入 停止滚动 **/clearInterval(lb_timer);lb_timer = null;/** 上一页 下一页按钮浮现 **/$("#J-lb .btn-prev, #J-lb .btn-next").show();}, function(){/** 方法二 鼠标离开 开始滚动 **/lb_timer = setInterval(function(){lb_cur++;showLimitBuyProducts();}, 1000);/** 上一页 下一页按钮浮现 **/ $("#J-lb .btn-prev, #J-lb .btn-next").hide();});});
</script> <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}.limit-box{position:relative;width:970px;margin:20px auto;height:215px;overflow:hidden;border:1px solid #e6e6e6}
/* limit-buy-hd */
.limit-buy-hd{position:relative;height:37px;background:#f8f8f8 url(images/title.gif) no-repeat 80px 0;border-bottom:1px solid #e6e6e6;line-height:37px}
.limit-buy-hd h2{float:left;overflow:hidden;display:inline;width:85px;font-size:14px;padding:0 0 0 10px;}
/* limit-buy-nav */
.limit-buy-nav{float:right;width:60px;margin:7px 10px 0 0}
.limit-buy-nav span{float:left;width:44px;height:21px;font-size:14px;line-height:21px;text-align:center}
.limit-buy-nav em{margin-right:1px;color:#ea5501;font-weight:700}
.limit-buy-nav .prev,.limit-buy-nav .next{float:left;overflow:hidden;width:8px;height:9px;margin:6px 0 0;background:url(images/arrowbg.png) no-repeat -59px -180px}
.limit-buy-nav .next{background-position:-52px -180px}
/* limit-buy-bd */
.limit-buy-bd{overflow:hidden;position:absolute;top:38px;left:0;width:9000px;z-index:1}
/* btn-prev */
.btn-prev,.btn-next{overflow:hidden;position:absolute;display:none;top:93px;width:27px;height:48px;background:url(images/arrowbg.png) no-repeat 0 0;z-index:10}
.btn-prev{left:0}
.btn-next{right:0;background-position:-40px 0}
.btn-prev:hover{background-position:0 -60px}
.btn-prev:active{background-position:0 -120px}
.btn-next:hover{background-position:-40px -60px}
.btn-next:active{background-position:-40px -120px}
/* products */
.products{float:left;width:971px}
.products li{float:left;position:relative;width:164px;height:167px;padding:10px 15px 0;}
.products li .pic{overflow:hidden;position:relative;width:120px;height:120px;margin:0 auto 4px}
.products li .pic img{width:120px;height:120px}
.products li .price{position:absolute;top:107px;right:15px;background:url(images/pricebg.gif) no-repeat;padding:6px 0 0 8px;width:74px;height:26px;line-height:26px;font-size:14px;font-weight:800;color:#fff;text-align:center}
.products li .name{overflow:hidden;height:36px;margin:0 0 2px;line-height:18px;text-align:center}
</style><div class="limit-box" id="J-lb"><div class="limit-buy-hd"><h2>97站长网</h2><div class="limit-buy-nav" id="J-lbn"><a href="javascript:void(0)" class="prev"></a><span><em id="J-lbcp">1</em>/4</span><a href="javascript:void(0)" class="next"></a></div></div><a href="javascript:void(0);" class="btn-prev"></a><div class="limit-buy-bd" id="limit-buy"><ul class="products"><li><p class="pic"><a href="http://www.97zzw.com" target="_blank"><img src="data:images/01.jpg" alt="欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色" /></a></p><p class="name"><a href="http://www.97zzw.com" target="_blank">欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色</a></p><p class="price">￥358.00</p></li><li><p class="pic"><a href="http://www.97zzw.com" target="_blank"><img src="data:images/02.jpg" alt="泸州老窖传世窖（A5）( 两瓶套装))52度" /></a></p><p class="name"><a href="http://www.97zzw.com" target="_blank">泸州老窖传世窖（A5）( 两瓶套装))52度</a></p><p class="price">￥158.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/03.jpg" alt="三洋（SANYO）32英寸LED电视32CE530ALED" /></a></p><p class="name"><a href="#" target="_blank">三洋（SANYO）32英寸LED电视32CE530ALED</a></p><p class="price">￥58.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/04.jpg" alt="宏碁（acer）14.0英寸笔记本电脑 V5-471G-32364G50Mabb（i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝" /></a></p><p class="name"><a href="#" target="_blank">宏碁（acer）14.0英寸笔记本电脑 V5-471G-32364G50Mabb（i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝</a></p><p class="price">￥148.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/05.jpg" alt="SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包" /></a></p><p class="name"><a href="#" target="_blank">SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包</a></p><p class="price">￥658.00</p></li></ul><ul class="products"><li><p class="pic"><a href="#" target="_blank"><img src="data:images/06.jpg" alt="saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫" /></a></p><p class="name"><a href="#" target="_blank">saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫<em></em></a></p><p class="price">￥308.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/07.jpg" alt="美的（Midea）微波炉EG7KCGW2-NW" /></a></p><p class="name"><a href="#" target="_blank">美的（Midea）微波炉EG7KCGW2-NW<em></em></a></p><p class="price">￥68.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/08.jpg" alt="伟峰（WEIFENG）三脚架WT-3110A" /></a></p><p class="name"><a href="#" target="_blank">伟峰（WEIFENG）三脚架WT-3110A<em></em></a></p><p class="price">￥18.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/09.jpg" alt="力博得（Lebond）电动牙刷M.tic绿" /></a></p><p class="name"><a href="#" target="_blank">力博得（Lebond）电动牙刷M.tic绿<em></em></a></p><p class="price">￥8.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/10.jpg" alt="【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣" /></a></p><p class="name"><a href="#" target="_blank">【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣<em></em></a></p><p class="price">￥28.00</p></li></ul><ul class="products"><li><p class="pic"><a href="#" target="_blank"><img src="data:images/05.jpg" alt="欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色" /></a></p><p class="name"><a href="#" target="_blank">欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色</a></p><p class="price">￥8.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/04.jpg" alt="泸州老窖传世窖（A5）( 两瓶套装))52度" /></a></p><p class="name"><a href="#" target="_blank">泸州老窖传世窖（A5）( 两瓶套装))52度</a></p><p class="price">￥18.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/03.jpg" alt="三洋（SANYO）32英寸LED电视32CE530ALED" /></a></p><p class="name"><a href="#" target="_blank">三洋（SANYO）32英寸LED电视32CE530ALED</a></p><p class="price">￥158.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/02.jpg" alt="宏碁（acer）14.0英寸笔记本电脑 V5-471G-32364G50Mabb（i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝" /></a></p><p class="name"><a href="#" target="_blank">宏碁（acer）14.0英寸笔记本电脑 V5-471G-32364G50Mabb（i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝</a></p><p class="price">￥68.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/01.jpg" alt="SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包" /></a></p><p class="name"><a href="#" target="_blank">SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包</a></p><p class="price">￥88.00</p></li></ul><ul class="products"><li><p class="pic"><a href="#" target="_blank"><img src="data:images/10.jpg" alt="saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫" /></a></p><p class="name"><a href="#" target="_blank">saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫<em></em></a></p><p class="price">￥38.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/09.jpg" alt="美的（Midea）微波炉EG7KCGW2-NW" /></a></p><p class="name"><a href="#" target="_blank">美的（Midea）微波炉EG7KCGW2-NW<em></em></a></p><p class="price">￥98.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/08.jpg" alt="伟峰（WEIFENG）三脚架WT-3110A" /></a></p><p class="name"><a href="#" target="_blank">伟峰（WEIFENG）三脚架WT-3110A<em></em></a></p><p class="price">￥18.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/07.jpg" alt="力博得（Lebond）电动牙刷M.tic绿" /></a></p><p class="name"><a href="#" target="_blank">力博得（Lebond）电动牙刷M.tic绿<em></em></a></p><p class="price">￥38.00</p></li><li><p class="pic"><a href="#" target="_blank"><img src="data:images/06.jpg" alt="【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣" /></a></p><p class="name"><a href="#" target="_blank">【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣<em></em></a></p><p class="price">￥68.00</p></li></ul></div><a href="javascript:void(0);" class="btn-next"></a>
</div>
<p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p align="center">来源：<a href="http://97zzw.com/" target="_blank">站长素材</a></p>
</body>
</html>

jquery 滚动特效相关推荐

jQuery教学－简单好用的视差滚动特效Parallax Effect
若各位有在注意Firefox OS的朋友,应该会发现到,在台湾的官网中,有一个相当特别的效果,当滚动画面时,感觉画面上叠了一层图层,可在某一个区块中,把背景固定住,然后内容不断的更换,当这个单元介 ...
html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...
网站公告栏一般采用滚动形式,随着jquery的出现,特效做起来更加简单,所以目前大多数网站都有自己的公告栏目,采用文字滚动的形式,今天来分享几个垂直公告文字滚动特效,分别是全面版,常用版,以及极简版! ...
jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
2019独角兽企业重金招聘Python工程师标准>>> 最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这 ...
html土图片滚动特效,jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...
jquery实现数字滚动特效
一.引入js文件 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <s ...
html数字滚动动画效果,高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点: 只有分隔符: 只有小数点: 无分隔符,无小数点: 运行效果图: 具体代码如下数字 ...
css3轮播不用jpuery_15款效果很酷的最新jQuery/CSS3特效
很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...
html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

jquery 滚动特效

jquery 滚动特效相关推荐

最新文章

热门文章