天猫轮播代码的强大作使用:优惠券旋转动态效果

  • 时间:2018-09-04 21:52 作者:学以事用 来源:学以事用 阅读:479
  • 扫一扫,手机访问
摘要:视频加载中...天猫轮播代码最基本的结构由天猫轮播代码生成优惠券特效的基本结构 前面的文章我们已经详情过天猫店铺轮播代码的组成部分是由:1.J_TWidget(轮播代码的各项参数部分);2.contentCls(轮播内容的部分,也就是我们平常做的海报,banner大小基本是1920px宽的);3.n

视频加载中...

天猫轮播代码的强大作使用:优惠券旋转动态效果

天猫轮播代码最基本的结构

天猫轮播代码的强大作使用:优惠券旋转动态效果

由天猫轮播代码生成优惠券特效的基本结构

前面的文章我们已经详情过天猫店铺轮播代码的组成部分是由:

1.J_TWidget(轮播代码的各项参数部分);

2.contentCls(轮播内容的部分,也就是我们平常做的海报,banner大小基本是1920px宽的);

3.navCls(焦点部分,或者者焦点数字);

4.以及prevBtnCls和nextBtnCls,左箭头和右箭头部分。

很显然,这里没有加上箭头的参数和箭头的Html部分,由于在这它们不需要,还有轮播内容的部分我们也不需要了,它的样式display:none;已经说明了一切,确切地说不是不需要,只是需要它的一部分,需要它的结构不需要它的内容。

在整个轮播代码的整体结构中,真正需要的就是

,也就是这两个参数:'navCls':'h_nav'和

'activeTriggerCls':'h_active'

这个h_active是随着肯定的时间间隔(也就是我们所说的轮播间隔时间即:'interval':2)跳到某一个容器的class里的,意思就是说,我跳到你容器DIV的class里,就轮到你展现在人们的视野里,就该到你体现的时刻了。

在天猫店铺中,有时候我们可能会增加多个轮播板块,熟习天猫店铺装修风格的美工设计们就知道这点,所以在h_con下的

ks-switchable-panel-internal2250里后面的数字2250是可以变的,同理:还有h_nav下的ks-switchable-trigger-internal2249的数字。

假如你在店铺里多增加个轮播板块,那么这个数字在h_con下可能是3561,h_nav下可能是3560。

下面展现这个旋转效果的CSS样式代码:

.hd_quan0505 .h_item .h_mask{left:0px;top:0;-webkit-transition:2s all;-moz-transition:2s all;-o-transition:2s all;transition:2s all;}

.hd_quan0505 .h_item.h_active .h_mask{transform:rotate(150deg);-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);-o-transform:rotate(150deg);-moz-transform:rotate(150deg);

我大概翻译下:(针对小白有些基础,大神或者者专业的请绕道走)

第一行:

就是这个容器里的容器h_mask的样式是:位置是距左边0px,距顶部位置0px(这个已经有绝对定位为前提了),变化2秒时间,其中那么多重复的那是针对不同浏览器而书写的,做前台的都要考虑到不同浏览器之间的兼容性。

第二行:

当触发到这个容器的时候,它所要产生的效果就是旋转150度,其余那么多重复也是考虑到不同浏览器的兼容性。

这就是天猫轮播代码中焦点部分navClS结合CSS样式带来的动态效果部分,前提都是你的店铺有购买这个权限。

若有需要完整代码的小伙伴帮忙留下你宝贵的评论并且私信,我会把完整代码发给你们。感谢大家对自媒体的支持!

(本文所涉及到的素材版权,图片和代码归原创者所有,不做商业使用途,仅做学习之使用)

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部