艺灵设计

全部文章
×

淘宝百叶窗轮播特效代码生成器使用说明

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-08-01 22:09:08 - 阅: - 评:1 - 积分:0

为了写一个百叶窗生成器,洒家花了一周的时间,各种折腾。昨晚快12点时遇到个“截取某字符串后面首次出现某某字符中间内容”的问题,百度无结果,最后到csdn发帖浪费了20币结果还无人回复,坑爹啊!今日在小伙伴的帮助下,度过难关,终于把这个百叶窗给写完了。附图一张:

下面对上图各数字的功能进行讲解:
1.图片宽度:默认900,建议值范围[700,900],值未做限制,不建议值超过990,因为没有做全屏框架。当初考虑到淘宝C店二级页面受限制因素才建议值不大于900。
2.图片高度:默认360,这里写轮播图片的高度即可,建议值范围[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,这个有点抽象,可以理解为将一张图片进行平均切割成多少份。在选择时请确定图片宽度或高度除以叶数后的结果为整数,因为小数在浏览器中不是很友好。这里默认图片宽900,水平滚动,叶数为9,正好将图片切成9份,每份宽100。
9.自动播放:默认是true,设置成是后会自动播放。
10.店铺类型:默认是C店,可选C店或B店,建议适具体店铺进行勾选,避免生成代码在店铺中失效!
11.代码压缩:默认值是,当点击【生成代码】后会自动压缩代码,占空间更小。当再次选择否后,需要再次点击【生成代码】好生成新代码哦!
12.新增按钮:默认轮播图片只有3张,若亲想多添加几张图片的话,可以通过点击此按钮来实现,最多只能添加5张图片。
13.删除按钮:点击后可以删除当前图片,最少要保留一张图片。
14.图片链接与宝贝链接:从上往下数,第几行就是代表第几张图。例如我添加一行,刚现在有4行了,那么第4行就代表第4张图,记得换图片链接哦,他人图片在淘宝里是会被过滤的哈。可以设置对应图片的链接,不设置为默认链接。
15.生成代码:这一步是关键,不点击的话就不能生成亲亲手设置的代码哦!
16.成品效果:点击这个前必须要先生成代码,点击后会在一个新页面中展示效果,若效果不连贯属于正常现象,放店铺中会自动解决此问题。
17.生成代码区:在这里鼠标单击后按下“Ctrl+C”即可成功复制代码,然后再店铺中新建一自定义模块,选择源码,粘贴代码后按确定,发布后方可看到店铺中的效果,不保存只预览无效!!!
18.使用攻略:点进去后会跳转到这篇文章。
19.原始效果区:这里是默认效果区,修改下面的值时这里会发生同步变化,若想看到修改后的整体效果,建议点击【成品效果】。

自我感觉洒家写的功能还是蛮精细的,对于生成叶数比较多的百味窗轮播特效时用此生成器可以大大节省时间,不用到dw中进行一个个修改图片背景位置,省时省力。如果让洒家来评价这款生成器的话,那就是一个字,那就是“赞”!

明日发布此生成器地址,又是完全免费的哦!明日七夕,会有其它福利送小伙伴们。小伙伴们用着好用时别忘记宣传哈,后续会推出其它功能,敬请期待。

最后,亲们在使用中如有任何疑问,均可在评论区中提交问题(严禁回复无意义内容);或者点击导航上面的qq头像直接进群(请使用自己的大号,小号有不良记录的审核不会通过!)请教;或者将问题发我qq邮箱:315800015@qq.com。同时,如果亲在使用中发现生成器有bug,还请亲能慷慨指出,提前谢过!

2014.08.02 18:57更新

淘宝百叶窗轮播特效代码生成器地址:http://www.yilingsj.com/zxsc/lbtx/2014-08-02/183.html

2014.08.30 20:30更新

新增功能:
1.链接选项,解释:可通过选择保留或清除来控制轮播图中的链接,暂时只是统一保留或清除,后续会进行调整到单个保留或清除。
完善功能:
1.叶数完善至可添加30叶;
2.轮播图片完善至最多可添加10张轮播图;
3.对“动画方式”进行了更直观的描述同时有数字号标识;
4.对每个功能的title标签都进行了补充,鼠标滑过时可直接看到提示
5.百叶窗【炫酷版】已推出,主要以炫酷视觉特效为主,应用地址:http://www.yilingsj.com/zxsc/lbtx/2014-08-30/199.html

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

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

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

Tag: 百叶窗特效 淘宝轮播特效 特效代码生成器 淘宝店铺装修 C店特效

上一篇: 淘宝全屏海报+多链接代码生成器使用说明   下一篇: 淘宝自定义css全屏轮播特效代码生成器使用说明

评论区