本博客发布过类似的循环滚动插件,最近又看到一个比较小巧、实用的插件,现发出来一起分享研究。特点是,每个滚动元素的宽或高可以不统一。不关是文字还是图片都是循环显示,也就是所谓的不间断显示。
先看第一种情况:
元素总高度小于容器高度,不滚动
第二种情况一第一种情况对比:
元素行高可以不统一
调用方法:
$(".scroll_two").jScroll({vertical: true});
<h2>元素行高可以不统一</h2>
<div class="box scroll_two">
<ul>
<li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li>
<li><a href="#">新车</a>| <a href="#">外观媲美轿车 全新一代奥德赛9月初亮相</a></li>
<li><a href="#">活动</a>| <a href="#">开启燕京啤酒清爽之旅,赢取万元单反相机</a></li>
<li><a href="#">探密</a>| <a href="#">亲历探寻长寿村莫斯利安的神奇之旅</a></li>
<li><a href="#">中房</a>| <a href="#">2009CIHAF第十一届中国住交会</a></li>
<li><a href="#">惠普</a>| <a href="#">你的打印机能省50%打印成本吗?</a></li>
</ul>
</div>
第三种情况图片:
向左翻屏
调用方法(其实是一样的):
$(".scroll_three").jScroll({speed: 2000, scroll: 3});
<h2>向左翻屏</h2>
<div class="box scroll_three">
<ul>
<li><a href="#"><img src="images/1.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="130" height="107" alt="" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="130" height="107" alt="" /></a></li>
</ul>
</div>
查看demo 下载例子
分享到:
相关推荐
这是一款可以使任何图片列表进行水平和垂直滚动的jQuery插件。该jquery列表滚动插件可以使用任何列表、任何尺寸和任何内容。它可以设置水平和垂直滚动,自动滚动和无限循环滚动,非常适用于滚动新闻的制作。
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 ...loop: -1 // 设置循环滚动次数 (-1为无限循环) fxEasingShow: "swing" // 缓冲效果 fxEasingScroll: "linear
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上、下、左、右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置。JQ里面有些重复的地方,暂时没想到更好的方法去精简。不过效果还是可以的...
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
内容索引:脚本资源,jQuery,图片滚动,StartStopSlider,jQuery插件 jQuery StartStopSlider 从其英文意思就可看出,这是一款滚动切换插件,不单纯是滚动,而且还加入了动感的Flash效果,是用jQuery模拟出的Flash效果...
图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯片插件 创意中国flash+xml焦点图 flash+xml左右箭头翻页焦点图代码 Flash+XML前后按钮超酷焦点图 下拉框美化插件 多标签自动横向滚动新闻导航...
图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯片插件 创意中国flash+xml焦点图 flash+xml左右箭头翻页焦点图代码 Flash+XML前后按钮超酷焦点图 下拉框美化插件 多标签自动横向滚动新闻导航效果
图文滚动jQuery跑马灯代码是一款基于jquery limarquee插件实现的支持任何DOM元素的jQuery跑马灯特效。
19.9 jquery的插件扩展 574 19.10 jquery ui类库 577 第20章 客户端存储 579 20.1 localstorage和sessionstorage 581 20.2 cookie 586 20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21...
asprain论坛支持多种论坛广告形式,包括页头广告、页脚广告、帖子中的文字广告、帖子右边的图片广告、全屏浮动广告、左右对联广告、页面右下角的弹出广告等。所有的广告位都支持循环轮播。也就是说,你可以在同一个...
-更新/basic/login.aspx示例,使用验证图片(feedback:kedee)。 -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx(feedback:chenguizhu2006)。 -为所有的表单字段增加AJAX属性...
-更新/basic/login.aspx示例,使用验证图片(feedback:kedee)。 -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx(feedback:chenguizhu2006)。 -为所有的表单字段增加AJAX属性...