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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Javascript的闭包
Dec 31 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue实现顶部菜单栏
Nov 08 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
PHP常用正则表达式集锦
2014/08/17 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHPMailer发送邮件
2016/12/28 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python的依赖管理的实现
2019/05/14 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python3 assert断言实现原理解析
2020/03/02 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
文明教师事迹材料
2014/01/16 职场文书
企业消防安全责任书
2014/07/23 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
java多态注意项小结
2021/10/16 Java/Android
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript