注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

jQuery UI制作的滑动条效果  

2013-06-19 14:37:11|  分类: JQuery UI |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、引用JS文件:
今天的效果是一个slider效果,根据jQuery UI官方的例子说明,我们需要总计3个JS文件:
(1)jQuery.js
(2)ui.core.js
(3)ui.slider.js
同时需要一个CSS文件:
(1)jquery-ui-1.7.2.custom.css
我们在网页中把它们全部引入,然后给一个div元素应用插件,代码如下:
$(function() {
$(".drag_cont_btn").slider();
});

2、添加HTML代码 

点我查看HTML页面

3、创建Slider 
在上一步中,slider并没有跟图片列表关联起来。这一步我们来完成它。
通过查看jQuery UI slider的API,我们可以找到2个非常有用的参数:
(1)max:滑动块的宽度的最大值
(2)slide:滑动时的回调函数
通过设置max,我们可以给滑动块一个范围。通过使用slide这个回调函数,我们可以控制图片列表滚动。 
关键代码:
// slider将要用到的参数:
// (1)max:最大值
// (2)slide:滑动时动态改变容器的left.
var sliderOpts = {
max: width - parseInt($dragCont.css("width")),
slide: function(e, ui) { 
$contain.css("left", "-" + ui.value + "px");
}
};
//创建slider
$button.slider(sliderOpts);
点我查看HTML页面

4.隐藏不必要的部分 

只所以把这步放到这里说,主要是想让大家知道下 这个 动画的实际原理。隐藏不必要的部分相信大家都明白怎么做。使用CSS的overflow:hidden即可。加到哪个元素上,这个不要我说了吧。
点我查看HTML页面

5.多行列表 

通过前面几步的学习,制作一个多行的列表岂不是小菜一碟了。
改进步骤如下:
(1)相应元素的高度增加1倍。
(2)JS 计算元素宽度时,除以2。
  评论这张
 
阅读(359)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017