艺灵设计

全部文章
×

淘宝自定义css全屏轮播特效代码生成器使用说明

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-08-06 21:16:43 - 阅: - 评:2 - 积分:0

上周六发布了《淘宝百叶窗轮播特效代码生成器》,经过几天不停的奋斗,第三款生成器→→《淘宝自定义css全屏轮播特效代码生成器》已经制成。看名字就知道其强大之处,自定义css,这是多少苦逼装修者所不能及的事情啊!要知道,官方开通旺铺css的费用是2400/年,绝对不忽悠你,淘宝忽不死你!有图有真相,上图:

 

怎么样,我说不忽悠你吧。一切向钱看齐,这年头,没钱什么都办不成事,你想向京东一样完全自定义css,呵呵,天空飘来五个字,那都不可能!你灰心了么?遇到洒家制作的此款神器,天空又飘来五个字,那都不是事!不要问我如何实现完全自定义css,之前有过文章介绍,想了解可点击《c店完全自定义样式》。回归正题,对于此生成器还是先放一张功能截图吧:

先来对此款神器做下点评:
优点:功能十分强大:宽度决定全屏,990,750,1920完美变身;设置选项之多且精细秒杀任何一款装修软件;自带破解css限制功能(卖家从此告别旺铺css,无须花费2400/年来开通样式)+自带三种目标列表特效+4种箭头特效是此神器最大的特色!
缺点:小白会对如此多的功能设置感到厌烦,洒家的悲哀!你永远不懂我伤悲,......
使用难度:  动手能力:

下面对上图各数字的功能进行讲解:
1.图片宽度:默认值1920,即全屏。建议值范围[700,1920]。若亲想用在详情页及其它地方,请根据实际尺寸填写。这里仅填写图片宽度,外框架会自动判断,无须担心兼容性问题!
2.图片高度:默认值592,建议值范围[100,600]。请填写将要轮播的图片高度,为避免出现图片变形,请保证所有轮播的图片宽、高度都一样。
3.链接类型:默认是新窗口,链接的打开方式,这里只提供两种,一种是新窗口;一种是本窗口,可通过下拉选择。
4.动画效果:默认是水平滚动,官方只提供4种动画效果设置,可通过下拉选择。
5.动画方式:默认是easeBoth,淘宝Widget规范文档中只提供前两种,后面6种是洒家以前摸索加收集的,详情可点击→→淘宝店铺轮播特效之easing中几个不为人知的属性,内有一链接,点击便可直观看对比各值的效果。
6.动画时长:默认是0.5s,轮播图片切换的时间,这里提供[0.1,2.0]s共20个值供亲选择。
7.延迟时间:默认是0.5s,延迟多少秒后才播放动画,这里提供[0.1,2.0]s共20个值供亲选择。
8.触发点:默认是显示,选择否后目标列表不会显示。
9.翻页按钮:默认是显示,选择否后目标列表不会显示。
10.触发方式:默认是滑过,官方只提供“滑过”与“点击”两种触发状态。
11.自动播放:默认是true,设置成是后会自动播放。
12.店铺类型:默认是C店,可选C店或B店,建议适具体店铺进行勾选,避免生成代码在店铺中失效!
13.代码压缩:默认值是,当点击【生成代码】后会自动压缩html代码,占空间更小。当再次选择否后,需要再次点击【生成代码】好生成新代码哦!

提示:14-22为辅助功能区,功能强大正在此处!

14.目标列表形状:默认是圆点,提供三种形状,“条形”,“圆点”,“方形”特效。
15.目标列表形状初始颜色:默认是ccc,熟练代码的可直接填写hex值,注意不要填写“#”,前面已经有了!新手可以通过点击弹出颜色框,选中满意的颜色,鼠标离开后即可完成选择。
16.目标列表形状初始透明度:默认是0.7;可通过下拉选择,值在[0.1,1.0]。
17.目标列表形状激活颜色:默认是f96,操作同15。
18.目标列表形状对齐方式:默认是居中,提供3种对齐方式,可通过下拉选择。
19.箭头宽度:默认是60,这里的值是箭头图片的尺寸。
20.箭头高度:默认是60,这里的值是箭头图片的尺寸。
21.箭头特效:默认是渐显,提供4种特效,“渐显”,“圆角”,“水平位移”,“垂直位移”,可通过下拉选择。
22.左右箭头图片链接:请选择自己的箭头图片链接,若无可复制输入框中的链接到地址栏,保存后上传到自己店铺图片空间,再复制链接替换。
23.图片链接与宝贝链接:从上往下数,第几行就是代表第几张图。例如我添加一行,刚现在有4行了,那么第4行就代表第4张图,记得换图片链接哦,他人图片在淘宝里是会被过滤的哈。可以设置对应图片的链接,不设置为默认链接。
24.新增按钮:默认轮播图片只有3张,若亲想多添加几张图片的话,可以通过点击此按钮来实现,最多只能添加5张图片。
25.删除按钮:点击后可以删除当前图片,最少要保留一张图片。
26.生成代码:这一步是关键,不点击的话就不能生成亲亲手设置的代码哦!
27.生成代码区:单独生成“html”和“css”,便于复制和修改。有div基础功底的亲可以在这里写自定义轮播特效,定局完后可点击右侧的【成品效果】在新页面查看最终效果。应用到店铺中时,请先分别复制“html”和“css”,“html”存放位置:在店铺中新建一自定义模块→→选择源码→→粘贴代码→→确定;“css”存放位置:点击导航→→编辑→→显示设置→→粘贴css即可。发布后方可看到店铺中的效果,不保存只预览无效!!!为了照顾文字白痴,附两种截图加以说明:

28.成品效果:点击这个前必须要先生成代码,点击后会在一个新页面中展示效果。
29.原始效果区:这里是默认效果区,修改下面的值时这里会发生同步变化,若想看到修改后的整体效果,建议点击【成品效果】。
30.使用攻略:点进去后会跳转到这篇讲解文章。

此神器乍一看上去是不是有种眼花瞭乱的感觉?有就对了,洒家制作生成器不会像普通装修软件那样功能简单,洒家会尽一切可能让使用者更好的将功能发挥到淋漓尽致!功能多代表其精细,精细当然出高大上的特效了,不废话了,反正若亲真正对淘宝店铺装修有过了解的,使用此生成器后肯定会有更大的收获!

生成器地址明日发布,发布后7*24小时内0积分使用。在使用中如有任何疑问,可在评论区中提交问题;或者点击导航上面的qq头像直接进群;或者发我qq邮箱:315800015@qq.com。最后希望所有使用的亲都能有所收获,店铺高大上同时掌握新技能div。

2014.08.07 16:00更新

淘宝自定义css全屏轮播特效代码生成器:http://www.yilingsj.com/zxsc/lbtx/2014-08-07/185.php

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2014-08-06/184.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: css全屏轮播 在线生成全屏轮播特效代码 淘宝店铺装修代码 破解淘宝自定义css权限框架 淘宝店铺装修软件

上一篇: 淘宝百叶窗轮播特效代码生成器使用说明   下一篇: 淘宝店内搜索框代码生成器使用说明

评论区