位置: 编程技术 - 正文

纯javascript移动优先的幻灯片效果(js移动dom)

编辑:rootadmin

推荐整理分享纯javascript移动优先的幻灯片效果(js移动dom),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js实现元素移动,javascript移动开发,js 移动元素,js移动端布局,js实现物体移动,js移动dom,js移动dom,js 移动元素,内容如对您有帮助,希望把文章链接给更多的朋友!

简要教程wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小,它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们,至于这些class样式你可以完全自定义。特点有:移动优先动画和过渡效果都使用CSS来生成轻量级,仅4k大小高度灵活性和可扩展性可自定义事件和API没有任何外部依赖

使用方法使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。

HTML结构

该幻灯片的基本HTML结构如下,你可以为第一个幻灯片slide添加.Wallop-item--current class。

初始化插件

纯javascript移动优先的幻灯片效果(js移动dom)

添加动画效果

该幻灯片插件默认是没有动画过渡效果的,如果你需要添加动画效果,需要引入相应的wallop-animation.css文件,并为元素添加Wallop--xxxx class。例如要添加淡入淡出的效果:

可用动画类型

该幻灯片可用的过渡动画类型有:Wallop--slideWallop--fadeWallop--scaleWallop--rotateWallop--foldWallop--vertical-slide上面是一些内置的过渡动画类型,你也可以自定义自己的过渡动画。 配置参数下面是一些可用的配置参数:buttonPreviousClass: 'Wallop-buttonPrevious'buttonNextClass: 'Wallop-buttonNext'itemClass: 'Wallop-item'currentItemClass: 'Wallop-item--current'showPreviousClass: 'Wallop-item--showPrevious'showNextClass: 'Wallop-item--showNext'hidePreviousClass: 'Wallop-item--hidePrevious'hideNextClass: 'Wallop-item--hideNext'carousel: true 方法Wallop幻灯片插件提供了一些基本的方法用于按钮的控制:goTo

允许跳转到指定index的幻灯片上。

next

跳转到下一个幻灯片slide。

previous

跳转到前一个幻灯片slide。

事件Wallop在每一次slide改变的时候都会发出一个事件,它返回一个detail对象,该对象包含当前slide的index和Wallop对象。

标签: js移动dom

本文链接地址:https://www.jiuchutong.com/biancheng/382703.html 转载请保留说明!

上一篇:JS实现点击按钮获取页面高度的方法(js实现点击按钮移动滑块到另一个按钮的方法)

下一篇:js实现文件上传表单域美化特效(js上传文件到后端)

  • 计提企业所得税分录
  • 专票现金支付规定
  • 结转已销商品的成本的会计科目有哪些
  • 合并报表是把资产负债表相加吗
  • 个人名字的发票专用章
  • 有营业额有成本怎么算成本占比
  • 开出已验旧的发票怎么办
  • 购买车位需要交哪些税
  • 业务分成方案
  • 购买虚开增票怎么处理?
  • 建筑施工企业检查的内容包括什么
  • 显示已申报税额
  • 金税盘820的抵扣联怎么装订?
  • 所得税需要结转嘛
  • 防伪税控开票系统SOAP服务端
  • 固定资产内部调拨流程
  • 收到个人实收资本怎么做账
  • 承兑汇票延期托收证明
  • 营改增政策解读
  • 王者荣耀百里守约是男是女
  • 公司开办期间账务处理
  • 企业季度税如何申报
  • 稳增长促转型
  • iphone操作系统
  • Cpqset.exe是什么系统进程 Cpqset有啥作用
  • 个人独资所得税税率表最新
  • 买材料没发票怎么办
  • phppost提交json
  • 多枝发财树怎么修剪
  • .hpp是什么文件
  • Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程
  • 申报补缴是什么意思
  • 长期应收款属于流动资产吗
  • 位于Praprotno村之上的圣托马斯教堂 (© Guy Edwardes/Minden Pictures)
  • yolov5超参数进化
  • thinkphp5依赖注入
  • vue中遇到的问题
  • css垂直导航栏
  • php支付宝支付流程原理
  • php安装及使用教程
  • vue项目安装路由
  • 英雄联盟轮转模式2020时间表
  • cookie from
  • Laravel5.1自定义500错误页面示例
  • 一次开票分期确认怎么弄
  • 软件成本如何归类管理
  • 物业监控安装地点要求
  • 如何测试php
  • db2 -x
  • 民办学校学费收现金
  • sqlserver常用命令
  • 企业一般存款账户和基本存款账户的区别
  • 代开普通发票需提供哪些材料?
  • 临时工工资计入什么费用
  • 企业哪些税费不通过应交税费账户进行核算
  • 核定征收需要什么资料
  • 不开票收据可以盖章吗
  • win8怎么自动修复
  • w10的产品密钥
  • linux配置raid5方法
  • executor进程
  • micc是什么意思中文
  • win10h2版本
  • xp系统电源设置在哪里
  • win7 64位系统双击桌面所有程序提示"文件没有与之关联的程序来执行"的解决方法
  • Windows RT 8.1 Update3(KB3033055)开始菜单多图欣赏
  • windowsxp改密码怎么改
  • pqv2isvc.exe - pqv2isvc是什么进程 有什么作用
  • 怎么创建windows虚拟机
  • Win10系统无法启动,如何修复
  • win7系统出现蓝屏重启怎么办
  • docker 开源项目
  • 列举linux常用的几个命令
  • 小米手机图库图标
  • python程序解读举例
  • django命令行
  • 浙江省发票勾选认证操作流程2021
  • 上海自由贸易区图片
  • 保险赔款是免征还是不征?
  • 京牌车船税网上可以交吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设