焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离
2011-04-03 15:31
453 查看
【说明】
示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同,因此在之前的基础上修改为animation2.js.两图均支持自动切换模式.
【参数说明】
公共部份:
scrollcontrol:滚动的容器(元素id) .
width:横向滚动一屏的距离;
height:纵向滚动一屏的距离;
isLR:标识横向滚动or纵向滚动(lr|tb)
mode:滚动模式(slow[减速]|fast[加速]|stand[恒速])
freq:setInterval的第二个参数,设置该参数控置移动时的频率.
rv:与mode协同工作.能够影响滚动速度,不同的mode,设置rv的意义不一样,可不用设置.
auto:标识是否自动滚动
autotime:自动滚动间隔,毫秒为单为,默认值3000
animation1.js 其它参数:
defindex:第一次显示焦点图的索引号,默认0
smallbtn:一个(元素)数组:[btn1,btn2,btn3],用来切换不同的页
cls:(string或function),如果是string,鼠标经过smallbtn中按钮时,会将该字符串做为样式名附加在(鼠标经过的)按钮上.如果是一个function,鼠标经过smallbtn中按钮时,会触发该函数.并且传入两个整型参数(lstIndex,curIndex),提供外围扩展.
start:一个事件,当开始切换焦点时触发.有两个参数(lstIndex,curIndex)
stop:一个事件,当结束滚动时触发,与start参数一致.
animation2.js 其它参数:
subcontrol:该容器是滚动内容的父容器,它应该能够反应出滚动内容的真实宽度或高度(元素id) .
leftbtn:控置往左移动的按钮(元素id)
rightbtn:控置往右移动的按钮(元素id)
beforefirst:一个事件,滚动到最左端时触发,有一个布尔类型参数(auto),标识是自动滚动,还是点击触发.
afterend:一个事件,滚动到最右边触发,参数与beforefirst一致.
【工作原理】
无论左右滚动,或者上下滚动,都是通过scrollLeft,scrollTop控置的.因此请确保 scrollcontrol 有足够的滚动空间.
【示例代码】
结构部份
view sourceprint?
调用代码
view sourceprint?
view sourceprint?
view sourceprint?
view sourceprint?
点此下载完整示例
示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同,因此在之前的基础上修改为animation2.js.两图均支持自动切换模式.
【参数说明】
公共部份:
scrollcontrol:滚动的容器(元素id) .
width:横向滚动一屏的距离;
height:纵向滚动一屏的距离;
isLR:标识横向滚动or纵向滚动(lr|tb)
mode:滚动模式(slow[减速]|fast[加速]|stand[恒速])
freq:setInterval的第二个参数,设置该参数控置移动时的频率.
rv:与mode协同工作.能够影响滚动速度,不同的mode,设置rv的意义不一样,可不用设置.
auto:标识是否自动滚动
autotime:自动滚动间隔,毫秒为单为,默认值3000
animation1.js 其它参数:
defindex:第一次显示焦点图的索引号,默认0
smallbtn:一个(元素)数组:[btn1,btn2,btn3],用来切换不同的页
cls:(string或function),如果是string,鼠标经过smallbtn中按钮时,会将该字符串做为样式名附加在(鼠标经过的)按钮上.如果是一个function,鼠标经过smallbtn中按钮时,会触发该函数.并且传入两个整型参数(lstIndex,curIndex),提供外围扩展.
start:一个事件,当开始切换焦点时触发.有两个参数(lstIndex,curIndex)
stop:一个事件,当结束滚动时触发,与start参数一致.
animation2.js 其它参数:
subcontrol:该容器是滚动内容的父容器,它应该能够反应出滚动内容的真实宽度或高度(元素id) .
leftbtn:控置往左移动的按钮(元素id)
rightbtn:控置往右移动的按钮(元素id)
beforefirst:一个事件,滚动到最左端时触发,有一个布尔类型参数(auto),标识是自动滚动,还是点击触发.
afterend:一个事件,滚动到最右边触发,参数与beforefirst一致.
【工作原理】
无论左右滚动,或者上下滚动,都是通过scrollLeft,scrollTop控置的.因此请确保 scrollcontrol 有足够的滚动空间.
【示例代码】
结构部份
view sourceprint?
1 | <div class = "center" id = "appliymain" ><!--js控置该容器的scrollLeft,scrollTop实现滚动--> |
2 | <divstyle = "width:9999px" ><!--该部份用来撑足空间--> |
3 | <div class = "content" id = "subcontent" > |
4 | <!--滚动内容部份--> |
5 | </div> |
6 | </div> |
7 | </div> |
view sourceprint?
1 | 图1,2调用 |
01 | slide1({ |
02 | length:5 |
03 | ,scrollcontrol: "paipaimain" |
04 | ,width:470 |
05 | ,height:205 |
06 | ,isLR: "lr" |
07 | ,cls: "hover" |
08 | ,mode: "slow" |
09 | ,rv:1 |
10 | ,freq:15 |
11 | ,smallbtn:$( ".paipai .nav li" ).get() |
12 | }) |
1 | 图3调用 |
01 | slide2({ |
02 | scrollcontrol: "appliymain" |
03 | ,subcontrol: "subcontent" |
04 | ,width:550 |
05 | ,auto: true |
06 | ,height:75 |
07 | ,isLR: "lr" |
08 | ,mode: "slow" |
09 | ,rv:1 |
10 | ,leftbtn: "applyleft" |
11 | ,rightbtn: "applyright" |
12 | ,freq:15 |
13 | }); |
相关文章推荐
- 54.java编程思想——创建窗口和程序片 逻辑与UI分离
- WEUI应用,用JS封装常用信息提示的弹层—Toast
- 大型网站架构演化(二)——应用服务和数据服务分离
- 网站案例使用 Sails.js 构建和定制企业级的 Node.js 应用
- UI与业务逻辑分离的另一种思路
- 大型网站架构演化(二)——应用服务和数据服务分离
- angularjs UI控制其分离,scope应用及$watch观察模型变化
- 大型网站架构演进(2)数据库与应用服务器分离
- [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技
- 拥有所有你需要去速建HTML5网站应用的Kendo UI--Overview
- React.js 应用 UI 框架
- Unity3d UI与逻辑分离改造
- [python][pyqt4] UI线程和逻辑线程的分离
- asp.net,C#,sqlserver,数据库,iis,js,异常,兼容,搜索,性能,备份,编辑器,存取分离,lucene,SEO优化,产品,运营,MVC,三层架构,nhibernate,microsoft,freamwork,网站开发联盟群号:
- 实用的js 焦点图切换效果 结构行为相分离
- js回调及应用在elementui。例如多个弹窗三级联动
- 【前后不分离之】vue+elementui+webpack+springboot 单页面 应用
- 网站架构:应用服务器和图片服务器分离
- WPF/Silverlight的UI和逻辑完全分离
- reactJs + webpack + semantic-ui-react 应用案例