位置: 编程技术 - 正文

纯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上传文件到后端)

  • 未交增值税和应交增值税科目怎么调整
  • 计提印花税会计凭证怎么做
  • 增值税发票平台怎么下载已认证发票
  • 什么是富人税收政策
  • 金税四期正式启动
  • 承兑汇票私人贴现要多久
  • 收银设备如何入账的
  • 公司滴滴发票是什么意思
  • 备用金现金日记账表格
  • 长期借款账务处理会计分录例题
  • 个体工商户收到发票怎么做账
  • 现金存入银行会计摘要怎么写
  • 购入汽车
  • 单位收到社保补缴通知书后怎么办
  • 小规模纳税人税收优惠政策变化
  • 跨年的增值税普通发票可以入账吗
  • 餐饮服务业是否属于企业
  • 增值税专用发票几个点
  • 国税里发票采集中的税控机动车发票是指什么发票?
  • 为什么收到的劳务费税点打星号?
  • 宽带合同属于什么合同
  • 税收六项减免
  • 哪些票据可以冲销
  • 采购均价怎么计算
  • 我公司以房产土地为主
  • 营改增后城建税和教育费附加包含在哪里
  • qq上的时间和手机不一样怎么办
  • 中小企业的界定标准是什么
  • 上海个人所得税计算器
  • bios中怎么设置显卡
  • 赠品不开发票合理么
  • win10播放视频软件
  • 苹果保护你的隐私
  • mcdlc.exe - mcdlc是什么进程文件 有何作用
  • 公司试乘试驾车卖掉在增值税哪个模块里开具
  • 财政补助收入的支付制度包括
  • 固定资产毁损应该填制什么凭证
  • 2020年外贸企业年终总结
  • 优先股转化
  • 设备拆修痕迹影响大吗
  • nginx反向代理详解
  • 企业所得税申报表A类
  • php与java区别
  • 选项式api和组合式api哪个好
  • 比特币形式投资是否诈骗
  • 宝塔面板要安装什么环境
  • 员工多了怎么管理办法
  • 固定资产清理是什么意思
  • sql server ceiling
  • vj刷题
  • 当月计算的增值税是负数怎么办
  • 其他应付款科目贷方登记发生的各种应付
  • 小规模纳税人适用什么会计准则
  • 企业收到退回的社保费分录
  • 应付账款的入账价值为未来偿还额
  • 公立幼儿园保育员招聘条件
  • 资金账簿印花税减半政策
  • 装修费摊销年限规定会计分录
  • 销售合同的印花税由谁交
  • 财务工作交接的通知
  • sqlserver表排序
  • mysql连接问题
  • windows2003r2安装教程
  • mac开机声音怎么取消
  • win7 管理
  • linux的ssr
  • win10系统桌面图标有白色方框的解决方法图...
  • windows7怎么关不了机怎么办
  • 深入理解ffmpeg pdf
  • nodejs rbac
  • 分享一下什么
  • javascript视频教程
  • 客户端名称 android-
  • jQuery中text() val()和html()的区别实例详解
  • 异地社保如何在本地使用医保
  • 税务工作创新
  • 怎么查询高速路封闭和开通
  • 哈尔滨出租车可以拼车吗
  • 佛山电动摩托车能上牌吗
  • 企业出租房产的税收优惠政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设