利用swiper插件做点击相应slide块居中
来源:互联网 发布:黑马程序员java面试题 编辑:程序博客网 时间:2024/05/29 18:56
css:.swiper-container .swiper-wrapper{transition: all 1s;}----------js:<script> var mySwiper = new Swiper ('.swiper-container', { slidesPerView : 3 }); var windowWidth = $(window).width();//屏幕的宽度 var divWidth = 0;//每个div宽度 var resPlaceX = 0;//最终的位置X var moveDistance = 0;//移动的距离 var startTranform = 0;//当前的transform值 var startTranformStr = ''//transform字符串 $('.swiper-slide').on('click',function(e){ var ev = e || event; var disX = ev.clientX - ev.offsetX;//当前div距离屏幕左边距离 divWidth = $(this).width(); resPlaceX = (windowWidth - divWidth) / 2; moveDistance = disX - resPlaceX; startTranformStr = $('.swiper-wrapper').get(0).style.transform; startTranform = startTranformStr.slice(startTranformStr.indexOf('(') + 1, startTranformStr.indexOf('px')); if (startTranform == '') {startTranform = 0}; $('.swiper-slide').removeClass('font-red'); $(this).addClass('font-red'); $('.swiper-wrapper').css({ 'transform' : 'translate3d('+ (parseInt(startTranform) + -moveDistance) +'px,0,0)', 'transition-duration' : '1s' }); }); </script>
阅读全文
1 0
- 利用swiper插件做点击相应slide块居中
- 使用vue-awesome-swiper滑块插件
- 使用vue-awesome-swiper滑块插件
- Swiper – 经典的移动触摸滑块插件【免费】
- swiper插件
- Swiper 插件
- swiper插件
- swiper插件
- reactjs 中运用swiper 插件时 点击事件失效问题
- 使用angular和swiper做的一个滑动小插件
- 适用于多种设备的的滑块幻灯片插件--jquery插件Swiper
- JQ插件:slide滚动插件
- 点击放大 swiper+photoswipe
- MFC_BitmapTool(点击图标做相应的操作)
- swiper上每个slide都有一个input或者textarea标签,IOS键盘或安卓手机键盘点击下一步,会出现两个swiper混在一个屏幕上
- 利用MarqueeTextView实现上下公告栏并点击进行相应跳转
- Swiper – 经典的移动触摸滑块插件(免费)
- 块居中
- jenkins自动部署
- JavaScript console 获取title
- Boost.Python:安装使用(兼具Boost.Python库中Python编译版本的修改)
- 视觉SLAM融合IMU问题研究笔记
- Attention Model
- 利用swiper插件做点击相应slide块居中
- 音频硬件发展史,以及DSD是如何产生的 一起说一说音频
- saltstack搭建lnmp并直接上线(rpm)
- 五、public\protect\private的区别
- 论GD&T在壳体设计中的广泛应用
- 40个Java多线程问题总结
- Redis学习笔记之七:有序集合类型
- 树 DFS序 详解[完全版]
- 如果我的文章对你有帮助,请支持我的淘宝店,多谢: