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入门教程(1) 什么是JS
Jan 31 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
js模拟F11页面全屏显示
Sep 17 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
微信小程序实现拖拽功能
2019/09/26 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
vant实现购物车功能
2020/06/29 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
什么是servlet链?
2014/07/13 面试题
英语道歉信范文
2014/01/09 职场文书
组工干部演讲稿
2014/09/02 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书