jQuery实现带水平滑杆的焦点图动画插件
2016-03-08 10:17
711 查看
这是一款很实用的jQuery焦点图动画插件,跟其他jQuery焦点图插件不同的是,它带有一个水平的滑杆,你可以通过滑动滑杆实现图片的切换,也可以通过点击图片来切换。这款焦点图是纯jQuery实现的,兼容性和实用性都还可以,而且也比较简单,很容易集成到需要的项目中去。
效果展示如下所示:
HTML代码
<div id="wrapper"> <ul id="flip"> <li title="The first image" ><img src="1.png" /></li> <li title="A second image" ><img src="2.png" /></li> <li title="This is the description" ><img src="5.png" /></li> <li title="Another description" ><img src="4.png" /></li> <li title="A title for the image" ><img src="3.png" /></li> </ul> <div id="scrollbar"></div> </div>
CSS代码
.ui-jcoverflip { position: relative; } .ui-jcoverflip--item { position: absolute; display: block; } /* Basic sample CSS */ #flip { height: 200px; width: 630px; margin-bottom: 50px; } #flip .ui-jcoverflip--title { position: absolute; bottom: -30px; width: 100%; text-align: center; color: #555; } #flip img { display: block; border: 0; outline: none; } #flip a { outline: none; } #wrapper { height: 300px; width: 630px; overflow: hidden; position: relative; } .ui-jcoverflip--item { cursor: pointer; } body { font-family: Arial, sans-serif; width: 630px; padding: 0; margin: 0; } ul, ul li { margin: 0; padding: 0; display: block; list-style-type: none; } #scrollbar { position: absolute; left: 20px; right: 20px; }
jQuery代码
jQuery( document ).ready( function(){ jQuery( '#flip' ).jcoverflip({ current: 2, beforeCss: function( el, container, offset ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} ) ]; }, afterCss: function( el, container, offset ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} ) ]; }, currentCss: function( el, container ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } ) ]; }, change: function(event, ui){ jQuery('#scrollbar').slider('value', ui.to*25); } }); jQuery('#scrollbar').slider({ value: 50, stop: function(event, ui) { if(event.originalEvent) { var newVal = Math.round(ui.value/25); jQuery( '#flip' ).jcoverflip( 'current', newVal ); jQuery('#scrollbar').slider('value', newVal*25); } } }); });
以上代码是针对jQuery实现带水平滑杆的焦点图动画插件,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- CSS中的滑动门技术
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
- 使用Browserify配合jQuery进行编程的超级指南