复制代码 代码如下:
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="/UploadFiles/2021-04-02/thumb5.jpg"><h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="/UploadFiles/2021-04-02/thumb6.jpg"><h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="/UploadFiles/2021-04-02/thumb7.jpg"><h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">100 sec</span>
</div>
<div>
<img src="/UploadFiles/2021-04-02/thumb8.jpg"><h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">120 sec</span>
</div>
<div>
<img src="/UploadFiles/2021-04-02/thumb9.jpg"><h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">140 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />


该功能是通过jqueryObject.scrollable()方法来实现的,其中scrollable方法提供以下两种方式:
1. $("div.scrollable").scrollable//该方法为采用默认方法显示滚动栏
2. $("div.scrollable").scrollable({config object}) //该方法通过配置对象来定制滚动栏显示内容及方式。
以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):
复制代码 代码如下:
$("div.scrollable").scrollable({
        size: 3,
        vertical:false,
        //clickable:false,
        loop:true,//设置是否自动跳转(根据间隔时间)
        //interval: 1000,//设置间歇时间间隔
        //speed:2000,
        items: '#thumbs',
        //prev:'.prev',//跳转到上一项
        //next:'.next'//跳转到下一项
        prevPage:'.prev',//跳转到上一页
        nextPage:'.next',//跳转到下一页
        hoverClass: 'hover',
        easing:'linear'
    });    

下面对scrollable配置参数描述如下:

属性 默认值   size 5 设置滚动项(图片或按钮等)显示的数量,但是前提条件是必须要正确设置滚动项的父节点(jquery tools官方网站和本文示例中该父节点的class为scrollable)CSS文件中的宽度(width),否则仅仅设置该处基本没效果;此外,如果设置分页的话,此处将会显示每页滚动项的数量,即触发“nextPage”或“prePage”后移动的滚动项数量。 vertical FALSE 设置滚动项滚动的方向,如果为false的话,滚动项水平滚动,否则为垂直滚动;注:对于垂直滚动,不仅需要修改该属性,还需修改相应的css文件。 clickable TRUE 当滚动项被点击时,是否触发滚动操作(即滚动项是否滚动)。 loop FALSE 当滚动到最后一个滚动项时,是否重新从第一个滚动项开始滚动,此项需和interval(interval不为0)属性共同使用。 interval 0 用于设置滚动项间自动切换的间隔时间(毫秒)。通过将该属性设置为正值,滚动项会在到达间隔时间后自动切换到下一个滚动项。 speed 400 自动滚动的速度(毫秒) keyboard TRUE 通过将该属性设置为true/false,来激活/屏蔽键盘方向键对滚动项的切换操作。如果该属性设置为true,那么通过左/右方向键来切换水平滚动的滚动项;通过上/下方向键来切换垂直滚动的滚动项。 items ".items" 包含滚动项的HTML元素——通过jquery选择器获取;该(或这些)html元素必须置于滚动项的父节点(HTML元素)内 prev ".prev" 包含向前移动滚动项(即向前按钮)的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。 next ".next" 包含向后移动滚动项(即向后按钮)的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。 prevPage ".prevPage" 包含跳转到上一页的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。 nextPage ".nextPage" 包含跳转到下一页的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。 navi ".navi" 包含分页导航器的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。 naviItem "a" 包含于分页导航器内的HTML元素(分页导航项)——通过jquery选择器获取;这些元素用于分页导航。 activeClass "active" 以下两种情况下对应项的CSS类名称:a.被点击的滚动项;b.当前页对应的分页导航项 disabledClass "disabled" 用于将next/nextPage(下一项/下一页)和prev/prevPage(前一项/前一页)渲染为不可用的CSS类名称。例如:当前滚动项前面没有滚动项时,prev元素会被置为不可用(disabled)状态。 hoverClass   当鼠标移动到某滚动项上方时,该滚动项的CSS类名称即被指为该class。 easing "swing" 用于设置滚动项切换时的动画效果,目前jquery tools提供了“swing”和“linear”两种动画效果,更多的动画效果参考jquery easing plugin api FALSE 该属性同该系列中juqry tools 之tabs 和 jquery tools 之 tooltip onBeforeSeek   滚动项滚动前触发该该属性设置的函数。如果该属性设置函数返回false,那么触发该函数的滚动项将不会滚动并替代前一个滚动项位置。该函数将会返回一个包含目标元素索引号的数组。 onSeek   滚动项滚动后触发该该属性设置的函数。对于scrollable方法及示例请参见jquery tools 之 scrollable(二)
标签:
jquery,tools,系列,scrollable

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jquery tools 系列 scrollable学习”

暂无“jquery tools 系列 scrollable学习”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。