jQuery实现带水平滑杆的焦点图动画插件


Posted in Javascript onMarch 08, 2016

这是一款很实用的jQuery焦点图动画插件,跟其他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实现带水平滑杆的焦点图动画插件,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
javascript对象的创建和访问
Mar 08 #Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 #Javascript
使用JQuery实现智能表单验证功能
Mar 08 #Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 #Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 #Javascript
Angularjs material 实现搜索框功能
Mar 08 #Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python新手实现2048小游戏
2015/03/31 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python读写ini文件的方法
2015/05/28 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
银行实习生的自我评价
2013/12/09 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
财产保全担保书范文
2014/04/01 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
孙振耀退休感言
2015/08/01 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
python井字棋游戏实现人机对战
2022/04/28 Python