前言: 本人在项目的工作中负责研发,页面及交互基本都是交给前端去做的。以前前端写的东西大概都知道,都是一些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中文网站: https://www.swiper.com.cn/

SwiperAPI网站:https://www.swiper.com.cn/api/index.html

初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作的更多相关文章

  1. sublime text3 --前端工程师必备神器

    sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...

  2. 初步认识微前端(single-spa 和 qiankun)

    初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...

  3. 摇滚吧HTML5!Jsonic超声波前端交互!

    前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都 ...

  4. 摇滚吧HTML5!有声前端交互!(Hello, Jsonic!)

    软件工程师们摆弄1和0编写他们的乌托邦,音乐人门把玩12平均律上的音符构筑他们的伊甸园.最近,我偶然看了<蓝色骨头>这部电影,片中的男主角是位黑客,同时又兼具音乐创作的才华.在现实生活中, ...

  5. SpringBoot学习笔记(4):与前端交互的日期格式

    SpringBoot学习笔记(4):与前端交互的日期格式 后端模型Date字段解析String 我们从前端传回来表单的数据,当涉及时间.日期等值时,后端的模型需将其转换为对应的Date类型等. 我们可 ...

  6. 了解php数据转json格式与前端交互基础

    php数据转json格式与前端交互 ArryJson1.php <?php $test=array(); $word=array("我12","要43", ...

  7. 后端拜拜,用不到你了,前端开发数据模拟神器nodejs

    后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请 ...

  8. 未读消息(小红点),前端与 RabbitMQ实时消息推送实践,贼简单~

    前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...

  9. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. 我的mfc基础知识点

    最近由于作业的缘故,结交了mfc这个新朋友,虽然他对我还很是陌生,相信日久定能生情!现在记录一些学习的笔记,备忘. MFC提供了不同类型的设备描述表的类(绘图类):CDC.CPaintDC.CClie ...

  2. python 安装cv2

    问题描述:import cv2 报错提示未安装此包. 解决措施: 1.cmd框中输入pip install cv2,若安装成功,则恭喜你一次性成功,如提示"无法找到与你当前版本的匹配&quo ...

  3. Java动态代理之JDK实现和CGlib实现

    一:代理模式(静态代理) 代理模式是常用设计模式的一种,我们在软件设计时常用的代理一般是指静态代理,也就是在代码中显式指定的代理. 静态代理由 业务实现类.业务代理类 两部分组成.业务实现类 负责实现 ...

  4. hystrix基本配置项(2)

    ①配置HystrixCommand HystxixCommand支持如下的配置: GroupKey:该命令属于哪一个组,可以帮助我们更好的组织命令. CommandKey:该命令的名称 ThreadP ...

  5. [翻译 EF Core in Action 2.3] 理解EF Core数据库查询

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  6. java游戏开发杂谈 - 界面刷新、坐标系

    之前几篇博客里的例子,大家运行过的话,就能看出来,界面是需要刷新的. JPanel里的绘制方法是paintComponent,界面上的东西都是这个方法画出来的. JPanel对象有一个repaint方 ...

  7. 一文读懂Asp.net core 依赖注入(Dependency injection)

    一.什么是依赖注入 首先在Asp.net core中是支持依赖注入软件设计模式,或者说依赖注入是asp.net core的核心: 依赖注入(DI)和控制反转(IOC)基本是一个意思,因为说起来谁都离不 ...

  8. 二分法与二叉树的 Java 实现

    算法与数据结构始终是计算机基础的重要一环,今天我们来讨论下 Java 中二叉树的实现以及一些简单的小算法,如二分查找,归并排序等. 二分查找 二分查找是一种在有序数组中查找某一特定元素的搜索算法,它在 ...

  9. 整合X-Admin前端框架改造ABP

    “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...

  10. Dubbo Mesh 在闲鱼生产环境中的落地实践

    本文作者至简曾在 2018 QCon 上海站以<Service Mesh 的本质.价值和应用探索>为题做了一次分享,其中谈到了 Dubbo Mesh 的整体发展思路是“借力开源.反哺开源” ...