艺灵设计

全部文章
×

鼠标滑过n种特效代码生成器帮助文档

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

继上周发布了《淘宝店内搜索框代码生成器》后第五款生成器→→《鼠标滑过特效代码生成器》已经制成。来上一张界面截图:
鼠标滑过特效代码生成器

先来对此款神器做下点评:
优点:1.自带33余种固有鼠标滑过特效同时布局结构上也可拓展数十种布局,(不包括拓展组装,拓展组装后可多达上百种,自由发挥到极致吧);
2.突破店铺950、990布局宽度限制;
3.解决旺铺css限制,卖家无需开通旺铺css(2400/年)
缺点:在布局上显得有些约束,主要是不方便提供拖拽定位(总要考虑到初级使用者不能控制精准位置的问题,只好采用浮动布局)
使用难度:  动手能力:

下面对上图各数字的功能进行讲解(要仔细看某些特殊地方哦,拓展功能待亲挖掘。)
1.框架宽度:默认值:1100,建议值在900-1920之间,请根据实际psd图来填写值。修改值后再通过点击“展示方式”即可自动调整图片大小。框架高度为自动获取。
2.店铺类型:默认C店专业版(950),天猫店铺请选择B店;生成的代码安装时一定要安装到对应的店铺类型以及对应尺寸的模块中,否则不会居中或全屏!举例:选中“C店基础版(左190)”,则生成的代码安装到淘宝C店基础版左侧宽为190px的模块中;
3.展示方式:默认是一行展示4个宝贝,有间距;
4.间距:默认有间距,即:图片与图片之间的右10px下10px,每一行的最后一张图片会自动清除间缝;当选择0px后会自动清除间距;
5.特效库:默认滑过变亮,这里共提供了33种固定特效,其中“变亮变暗”都可与后面的“动画效果”进行组装拓展成新特效;“边框特效”则提供了16种方位上的变化,顺序是上右下左,鼠标放上会有提示,至于各种演变后的效果是什么样子,那就要看亲的组装能力与创新思维了。(注:初步算了下,可演变成上百种效果)
6.滑过背景:默认样式一,提供8种背景,可自己填写自己的背景;
7.链接类型:默认新窗口打开链接;
8.自定义滑过背景:可以填写自己做的背景,若无可点击下载包后将图片上传到自己图片空间,再替换图片链接,必须替换!否则图片在店铺会被过滤;
9.图片链接:即图片的链接地址,最右边会有数字标识当前是第几张图片,宽和度均为当前图片的宽和高,这个会自动获取合适的值,仅在特殊情况下才建议修改。例如:控制图片不同宽度或高度等。
10.动画效果:默认6种动画效果,但可进行组装拓展,拓展后可达9+种,例如:上下下上,右左左右等;
11.增加按钮:点击一次即可成功添加一张图片,右侧会显示添加的标识号,然后再修改图片以及链接即可,最多可添加30张图片;
12.删除按钮:点击一次即可成功删除一张图片,右侧会显示添加的标识号,然后再修改图片以及链接即可;
13.生成代码:点击后即可生成代码,再复制左侧的“html”内容到自己店铺店招中,保存发布即可;
14.html,css:“html”内为最终生成的代码,可直接复制到店铺中应用;“css”内为css样式代码,可填写自己的css样式,如果不会div+css,可直接复制css到店铺店招中进行安装,附两张截图说明:
html内容操作步骤
css样式操作步骤
15.成品效果:点击可以在新页面预览最终的效果;这里说明一下,由于“店铺类型”的缘故,这里显示的效果整体位置可能不是居中,这个没影响,只在在店铺中安装时安装到对应的模块中即可正常显示,切记,一定要安装到对应的模块中
16.帮助文档:点击后会跳转到这篇《鼠标滑过n种特效代码生成器帮助文档》帮助说明文章。
17.即时效果区:修改下面的内容上面会改变,便于观察效果,最终效果请点击“成品效果”后浏览;

明日更新文章,附一些拓展布局技巧说明。

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

2014.08.26 22:00更新

白天在公司忙乎了一天,抽空对生成器进行添加了新“特效库”,目前特效库中的32种特效了,当然“变亮变暗”这种是可以与“动画效果”进行配套使用的,也可演变成多种创意特效;同时对“边框特效”也进行了完善,提供16种边框位置上的变化,后续有待改进与完善。至于布局,这个未提供拖拽定位,主要考虑初级用户没有精准位置的概念,尽管这样也可满足亲们的一些常规与非常规布局,如果自己会代码可进行自由修改,来上一张简单的布局图吧:
鼠标滑过n种特效代码布局图示例

鼠标滑过n种特效代码生成器地址:http://www.yilingsj.com/zxsc/lbtx/2014-08-27/197.php

2014.08.27 22:30更新

今日又新增了一些效果,说下“边框特效”吧。提供“统一颜色”和“五彩缤纷”两个选择,前者所有边框颜色都统一;后者4条边可变色;同时对“边框效果”由原来的16种新增至72种,总之就是1~4条边框来回不停变幻的组合,。再来说下价格这方面,有关价格的特效选项中都提供了“价格背景”,“原价颜色”,“折后颜色”这3个功能,总之,洒家开发的每款生成器中都暗藏有许多待挖掘的功能,亲们慢慢挖掘吧。好了,来上一张今天更新的效果图吧:
鼠标滑过n种特效代码生成器更新版

2014.08.29 22:00更新

修复了特效库中第14~18个特效中的负值在未开通旺铺css的店铺中被过滤问题。

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

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

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

Tag: 鼠标滑过n种特效代码生成器 聚光灯遮罩层特效 图片翻转旋转特效 淘宝店铺装修代码 破解淘宝css权限框架

上一篇: 淘宝店内搜索框代码生成器使用说明   下一篇: 淘宝百变轮播特效代码生成器帮助文档

评论区