代码改变世界

随笔档案-2013年3月30日

使用jQuery简单实现产品展示的图片左右滚动功能

2013-03-30 14:58 by zhaodacheng, 220 阅读, 收藏,
摘要： 今天要做一个产品展示功能，由于产品比较多，一屏展示不完，所以想要做一个通过点击进行翻页的效果，在网上找了几个都不大好用，最后只能自己动手写了。效果如下所示：原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一页或下一页的按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，需要两个div，外面的div的position设为retative，里面的DIV的position设为absolute。主要代码如下：HTML:<div id="product&quo 阅读全文

JS无缝滚动

2013-03-30 11:05 by zhaodacheng, 181 阅读, 收藏,
摘要： JS部分：$(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); }); function scrollNews(obj){ var $self = obj.find("ul 阅读全文