flipsnap 控件学习

来源：互联网发布：中文.商城域名骗局编辑：程序博客网时间：2024/05/21 00:48

个人觉得flipsnap控件比较好用，缺点是自己要写CSS样式。所以写个笔记，方便以后参考

为了让页面显示滑动的效果，原理大概如下：

第一层设置固定宽度 或者是 100%宽度，超过部分设置为不显示 overflow: hidden;<div>第二层设置为实际需要的宽度，即子div的n倍<div>第三层，实际内容的宽度<div></div></div></div>

例子

<div class="sqh_tmp_bj_ff container-fluid text-center  border_b_top_eee sqh_line_height_15 sqh_relative padding-left-right-0 border_b_bottom_eee"><div class="all_width sqh_overflow_hidden" id="availableDate"><div class="inner "><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5" >今天<br>5月25日</div><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5 sqh_font_color_red" >今天<br>5月26日</div><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5" >今天<br>5月27日</div><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5" >今天<br>5月28日</div><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5" >今天<br>5月29日</div><div class="border_b_right_eee float_left margin_bottom_5 margin_top_5" >今天<br>5月30日</div><div >今天<br>6月1日</div></div></div></div>//计算页面的宽度var screenWidth = document.body.clientWidth ;//得到浏览器三分之一的宽度（第三层，实际内容宽度）var oneDivWidth = screenWidth/3;//实际内容的宽度（第二层，实际内容的宽度）var innerDivWidth = oneDivWidth*7;$(".inner").css("width",innerDivWidth);$(".inner div").css("width",oneDivWidth).css("float","left");//实现滑动的初始化方法var flipsnap = Flipsnap('.inner',{//每次滑动的宽度distance: oneDivWidth,//最多移动4个宽度maxPoint : 4});//滑动完之后触发的事件flipsnap.element.addEventListener("fstouchend",function(ev){});//点击下一个$("#nextBtn").bind("click",function(){flipsnap.toNext();});//点击上一个$("#preBtn").bind("click",function(){flipsnap.toPrev();});

代码下载参考 https://github.com/hokaccha/js-flipsnap

API文档参考 http://hokaccha.github.io/js-flipsnap/doc.html

0 0