注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

触屏循环平滑滚动插件jQuery Smooth Touch Scroll

jQuery插件 fishcity 4119浏览

触屏循环平滑滚动插件jQuery Smooth Touch Scroll

jQuery Smooth Touch Scroll是一款轻量级的专门为触屏设备设计的jquery滑动插件。你可以使用Smooth Touch Scroll在您的移动设备如苹果,IPAD,安卓上实现像非常平滑的循环滚动效果,当然jQuery Smooth Touch Scroll也可以在桌面端使用拖拽来实现滚动,不过这个插件真的是针对触屏来设计的。

jquery插件实例:触屏循环平滑滚动jQuery Smooth Touch Scroll

引入核心文件

<!-- the CSS for Smooth Touch Scroll -->
<link rel="Stylesheet" type="text/css" href="../css/smoothTouchScroll.css" />

<!-- jQuery - Get it from Google API's -->
<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery UI - contains only widget -->
<script src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- jQuery kinetic -->
<script src="../js/jquery.kinetic.min.js"></script>
<!-- Smooth Touch Scroll -->
<script src="../js/jquery.smoothTouchScroll.min.js"></script>

构建html,这里的html可随意构建,只需一个大容易包含着需要滚动的内容就可以了。以下为本实例的代码:

<div id="touchScroller">
	<a href="#"><img src="images/field.jpg" alt="Demo image" id="field" /></a>
	<a href="#"><img src="images/gnome.jpg" alt="Demo image" id="gnome" /></a>
	<a href="#"><img src="images/pencils.jpg" alt="Demo image" id="pencils" /></a>
	<a href="#"><img src="images/golf.jpg" alt="Demo image" id="golf" /></a>
	<a href="#"><img src="images/river.jpg" alt="Demo image" id="river" /></a>
	<a href="#"><img src="images/train.jpg" alt="Demo image" id="train" /></a>
	<a href="#"><img src="images/leaf.jpg" alt="Demo image" id="leaf" /></a>
	<a href="#"><img src="images/dog.jpg" alt="Demo image" id="dog" /></a>
</div>

写入JS实例化插件

$(function() {
    $("#touchScroller").smoothTouchScroll({ continuousScrolling: true });
});

参数

//默认参数
options: {
    scrollableAreaClass: "scrollableArea", // String
    scrollWrapperClass: "scrollWrapper", // String
    continuousScrolling: false, // Boolean
    startAtElementId: "", // String},

scrollableAreaClass:如果你添加了一个滚动元素并且自定义了一个calss,那么你可以在此参数后写上这个class,通常情况下,Smooth Touch Scroll插件会自动获取参数,所以会很用少用到此选项。

scrollWrapperClass:如果你添加了一个包含元素(滚轴容器)并且自定义了一个calss,那么你可以在此参数后写上这个class,通常情况下,Smooth Touch Scroll插件会自动获取参数,所以会很用少用到此选项。

continuousScrolling:如果把这个设置为true使可实现循环滚动。

startAtElementId:如果你想滚动元素中的某个元素排到第一,那么请把这个元素的class写到这个选项上,插件会自动把此元素排到最左边即第一,但请确定后面有足够的滚动元素。

方法

recalculateScrollableArea

此方法通过计算所有的滚动元素的宽度来算出滚动容器(滚动轴)的最大宽度,在初始化插件后想添中或删除滚动元素时请使用此方法重置下宽度。此时也可以使用init-method方法来重置。代码如下:

$("#element").smoothTouchScroll("recalculateScrollableArea");
或者
$("#element").smoothTouchScroll();

restoreOriginalElements

在滚动前,Smooth Touch Scroll已经给在滚动容器内的滚动元素创建了一个原始排序,你可以调用此方法重置所有元素的排序并替换掉当前排序。不太理解英文所说的,请自行测试效果。

$("#element").smoothTouchScroll("restoreOriginalElements");

show

显示滚动条

$("#element").smoothTouchScroll("show");

hide

隐藏滚动条

$("#element").smoothTouchScroll("hide");

enable

启用滚动效果,默认是激活,如果你之前已经禁用滚动可以通过此方法来激活滚动。

$("#element").smoothTouchScroll("enable");

disable

禁用滚动效果

$("#element").smoothTouchScroll("disable");

destroy

摧毁实例,使元素恢复到原始状态

$("#element").smoothTouchScroll("destroy");

转载请注明:jQ酷 » 触屏循环平滑滚动插件jQuery Smooth Touch Scroll

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。