地震是怎样形成的,勇气默示录,唐棣
前言: 本人在项目的工作中负责研发,页面及交互基本都是交给前端去做的。以前前端写的东西大概都知道,都是一些js,css和html等的一些基本控制,都懂!但是今天前端突然做了一个具有特殊效果的dom:页面顶部放了5个包裹元素,包裹可以根据鼠标的拖动产生滚动效果,但是并没有使用正常的滚动条那种样式,而且还能默认实现自动动态滚动到第n个包裹的位置显示? 这一系列特殊效果的控制,百思不得其解,后来通过一位美女前端了解到,这里面用到了swiper这个神奇的js。
不过swiperjs还在不断的更新中,在使用过程中可能存在问题,需要关注可能出现的问题,一般没事哈!!!
先看项目里dom及相关js吧:
可以看到:dom中有大量跟swiper有关的样式:swiper-container,swiper-wrapper,swiper-slide 一些特殊的标记
swiper.js会根据这些标记,控制显示的元素数量,还可以根据swiperapi提供的一些方法如:滚动到默认位置-slideto(),这些就解决了我之前的所有疑惑
<div class="bs-category-outer dropsortlist"> <div class="swiper-container swiper-container-horizontal order-trackingtips swiper-container-os"> <ul class="swiper-wrapper"> #foreach($package in $!{order_info.ordertrackpackages}) <li class="swiper-slide #if($package.expressno==$!{current_express_no})current#end" expressno="$!{package.expressno}"> <a href="javascript:void(0);"><span></span>${velocitycount}</a> </li> #end </ul> </div> </div>
//swiper初始化,默认显示4个元素 var trackingtipsswiper = new swiper('.swiper-container-os', { slidesperview: 4, observer: true, observeparents: true, }); //swiper控制页面显示在默认位置 var curspeed = (speed == undefined) ? 200 : parseint(speed); myswiper.slideto(currentindex, curspeed);
总结:附上swiper学习的网址:前端一定要学习和去了解,帮助是很大的,可以通过简短的代码实现出特别好的效果,先简单介绍到这里吧,以后有机会继续学习补充...
swiper中文网站:
swiperapi网站:
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论