摘要：
考虑到部分看官对软件不熟悉以及对京东店铺装修环境不熟悉，艺灵特写一篇关于京东鼠标滑过变暗特效软件的使用教程文章，后续会录制视频教程......

看标题，顾名思义，这款软件适用场景为京东。当然，其它平台也适用。如果看官想应用到淘宝或天猫，前提条件是：店铺已开通旺铺css(2400/年)或会破解淘宝css权限，否则软件生成的css将无处安装！所以请看官注意，不是说所有的特效你都能用哈！如果你不想花费如此高的代价来开通旺铺css，可以找艺灵低价开通。在艺灵设计淘宝店中购买权限只要30大洋，童叟无欺哦！

下面艺灵将教看官们利用此软件做10+种鼠标滑过变暗特效，也就是常说的遮罩特效。小伙伴们快准备好，打起精神跟着艺灵一起学会软件出去尽情的装x吧！

我们先来看一个美工出的psd效果图吧，感谢@棉花提供环境。如图：这是一个两行两列的四张等大小图片。这里我们可以给这四张图片添加一个鼠标滑过变暗的特效。在写特效前，我们需要在psd中精确计算出每张图片的大小及间距和外框架尺寸。为节省时间，艺灵已做好数据统计工作。

数据统计工作

外框架尺寸：1190px*532px；图片尺寸：565px*236px；间距：20px；尺寸草图如下：接下来开始使用软件了。

使用软件

百度搜索：在线生成艺灵设计--点击进来--点击“京东鼠标滑过变暗特效”软件，如图：接下来开始正式使用软件。

首先是修改“基本参数”，前面我们已做好了数据统计工作，此时只需要填写对应的数据即可。如图： 接着是修改图片尺寸了，我们直接点击“图片信息”，然后开始修改。 图片不够时我们可以点击“+”进行添加图片。需要注意一点：这个里面的参数比较多，修改时请看清各处的说明，别修改错了！如图： 修改完尺寸后我们需要替换自己的图片以及各图片对应的超链接，如图： 现在基本上已经修改完了，我们像psd效果图那样把外框架添加一个白色背景，如图： 最后我们要来制作变暗特效了，替换“滑过设置”中的图片地址即可。当然，您也可以从已给出的背景库中进行选择。(注：所有图片必须先上传到自己图片空间，否则保在店铺保存时系统会自动过滤图片！)如图： 如果您对当前动画效果不满意，可以修改“动画类型”和“动画时间”。除此之外，您还可以选择动画效果，例如：“从左向右出现”、“从中心放大”等，如图： 一切修改完毕后我们可以在上面看到动态效果。觉得满意后再点击“生成代码”，此时html及css均会生成，只需要粘贴进京东店铺即可。 

如何将代码粘贴到京东店铺

为了让看官更好的看到效果，艺灵已新建一自定义页面。操作流程：登录京东店铺后台--添加自定义页面--在线生成效果欣赏--保存。如图：接下来我们需要新建一自定义模块来单独存放我们的css代码，操作如图：保存完css后，我们需要对生成的html进行保存。此时我们需要新建一自定义模块，操作步骤如图：

好了，终于搞完了，我们来看下最终的效果吧，京东测试链接：http://mall.jd.com/view_page-28690820.html

title:京东鼠标滑过变暗特效;
视频地址：http://cloud.video.taobao.com/play/u/759415648/p/2/e/1/t/1/30647569.swf

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-09-27/320.html

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