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 相关文章推荐
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP面向对象精要总结
2014/11/07 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JS作用域链详解
2017/06/26 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python绘图实现显示中文
2019/12/04 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
学习Python爬虫的几点建议
2020/08/05 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
幼师专业毕业生自荐信
2013/09/29 职场文书
六年级学生评语
2014/04/22 职场文书
司机岗位职责
2015/02/04 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
python中取整数的几种方法
2021/11/07 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android