免费咨询专线 4000-567-928
你现在位置: 首页 > 行业动态 > 正文 返回 >>

如何在淘宝天猫等电商页面中添加交互特效?

发布时间:2016-07-02 10:07:41 阅读次数:2204发布人:王进

众所周知,淘宝后台自定义模块不是让你随便插入代码的,如果能够随便插入代码那么淘宝美工人员将会逆天的,淘宝的规则也就无从谈起,因此淘宝后台自定义模块屏蔽了好多的代码,包含了css的定位属性,以及JavaScript代码的所有。

JavaScript代码(以下简称JS)学过网页的同学肯定都不陌生,JS是网页交互最重要的代码,想要让网页中增加非常多的交互特效,多数会依赖于JS代码,当然也有一部分会使用HTML+CSS3的交互。

刚才我们说过了,淘宝对JS代码进行了屏蔽,但是很多淘宝店铺有很多的交互,这是怎么回事那,这是因为淘宝虽然屏蔽了你自己写的JS代码,但是淘宝给你留下一扇窗,淘宝封装了一套widget规范,让你通过调用相应的参数就可以实现不错的交互效果,那么淘宝给我提供哪些交互特效组件那?


 

  1. Tabs - 标签页
  2. Slide - 卡盘
  3. Carousel - 旋转木马
  4. Accordion - 手风琴
  5. Popup - 弹出层
  6. Compatible - 兼容性组件

上面这留个就是淘宝系统为淘宝美工提供的交互组件,这些特效中,我们用到的最多的就是旋转木马和弹出层,我们分别来介绍一下什么是旋转木马和弹出层,并讲解一下他们的应用。

那么学习这些东西有没有参考文档供我们学习参考那,当然是有的了,我们只需要打开淘宝的开发平台即可,在地址栏直接输入http://open.taobao.com 就可以打开淘宝的官方开放平台,在搜索框中搜索“widget”这个关键字,就能找到我们的规范文档了,如图所示

 


 

打开淘宝开放平台只需找到相应的配置参数就能做出不错的交互效果。

很多参数配置起来不是很简单,也可以使用一些生成工具,比如“码工助手”、“盛夏在线”生成代码的效果也不错,想要脱离这些代码生成工具,那么可以到新视觉实训学习电商装修课程,能够学到很多不错的内容哦。






济南新视觉数码实训基地

Copyright 1996-2020 | 工商注册号:370000228005192 | 鲁ICP备14010827号
友情链接: 济南新视觉实训基地 | 济南平面设计培训 | 济南影视动画培训 | 济南室内设计学校 | 济南web前端培训 | 济南电商设计培训 | 济南教育人生网 | 济南UI培训 |