标签归档：jquery 无缝滚动

jQuery带缩略图左右滚动效果

发表于 2011/05/10 由 前端开发-武方博  5,029 views

这个效果比较常用,在很多商品展示页面会用到，例如淘宝店铺的图片展示和京东商城的商品展示页，其实这段代码很简单，直接看下效果好了！   演示地址：http://www.wufangbo.com/demo/jquery/12/index.html 下载地址：http://www.wufangbo.com/demo/jquery/12/12.rar HTML代码   <div class="pic_scroll">         <div class="pic_small">          <a href="#0"><img class="current" src="images/01.jpg" /></a>              <a href="#1"><img src="images/02.jpg" /></a>              <a href="#2"><img src="images/03.jpg" /></a>    &n......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

JS实现仿新浪微博大厅和腾讯微博首页滚动效果

发表于 2011/05/07 由 前端开发-武方博  5,832 views

JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果，貌似这些天有不少朋友需要这功能，前几天已经发了几个了，不过那一个效果是用jquery实现的《jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示）》，今天发现这款是js制作的好，不敢独享，希望需要的朋友喜欢哦。   演示地址：http://www.wufangbo.com/demo/javascript/02/index.html 下载地址：http://www.wufangbo.com/demo/javascript/02/02.rar   html代码 <div class="wp"> <ul id="slider" class="slider"> <li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a> <p>入山又恐别倾城  世间安得双全 不负如来不负卿</p>    </li> <li><a class=&qu......查看更多>>

发表在 javascript, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

jquery图片横向左右滚动效果（带按钮控制）

发表于 2011/05/07 由 前端开发-武方博  6,440 views

这个效果实例是我在去年买的一本书里面读到的，想必大家也知道那本书，就不提名字了，直接上下源代码 代码里面的注释很清楚，方便大家学习。 演示地址：http://www.wufangbo.com/demo/jquery/11/index.html 下载地址：http://www.wufangbo.com/demo/jquery/11/11.rar html代码   <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 条评论

Jquery图片无缝左右滚动插件

发表于 2011/05/01 由 前端开发-武方博  3,192 views

  zhw.scroll-1.0.js /* 功能：Jquery无缝滚动插件zhw.scroll-1.0.js 作者：leo 注意：暂只支持div下ul li的滚动 交流：xandchd_kane@163.com */ jQuery.extend({     Scroll: function(settings) {         //初始化参数         var config = $.extend({             stepWidth: 100,         // 滚动步长             waitTime: 4000,         // 间歇时间           &......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery图片左右滚动和jquery图片左右连续滚动

发表于 2011/04/27 由 前端开发-武方博  4,089 views

  公司网站要用到jQuery横向滚动图片特效，当时我为了速度，直接找了一段jQuery代码放上去了。缺点有两个：一、主管不满意，他需要的是连续不断的滚动，就是无缝滚动，而不是滚动一张图片，等一下再滚动一张图片；二、代码有个地方浏览器报错，我不知道为什么，但是删了也不行，必须要。 花了好长一段时间，找代码、改代码，终于搞定了上面提到的两个效果：滚动停一下、无缝滚动。感谢群里点拨我的朋友，感谢Google提供信息，感谢网上不知名的朋友提供代码。 jQuery滚动图片（非连续滚动） 演示地址：http://www.wufangbo.com/demo/jquery/06/index.html 下载地址：http://www.wufangbo.com/demo/jquery/06/06.rar 这段代码思路很简单，把ul里的li都浮动左，变成一横排。然后ul往左边animate移动一个图片的宽度，把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法，移开继续调用方法就OK了。 代码我就补......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示）

发表于 2011/04/22 由 前端开发-武方博  6,539 views

新浪微博未登录首页有一个“大家正在说”的模块，动态滚动最新发布的微博。从需求上来说，这个功能需要实时调用最新的微博数据，单就前端开发来说，其需求可以拆分如下： 1 内容持续滚动； 2 新微博将下面的微博先推下去，然后淡入进来； 3 鼠标经过内容暂停滚动； 4 容器底部渐变消失在背景色下。 上述4个需求之中，需求1-3为js技术实现，需求4为css技术实现，下面逐个需求来讲。 需求1和需求2：此功能使用css的position定位来控制整个ul列表的移动动画。结合需求2，我们可以写得更简单一些，让最后的li元素定时插入第一个li元素的上方，然后采用animate方法来改变li的高度和透明效果。而不停顿的滚动依然要用到setTimeout方法。在没有新数据加载的情况下，要实现有限内容循环滚动。 需求3：鼠标经过暂停的需求可以当鼠标hover经过的时候在某元素上加上某属性的值，这里采用name属性——判断此值是否存在，如果存在则不执行代码。 需......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , | 留下评论