先看下何谓滑鼠图片放大效果，图一为原始浏览图，图二为鼠标移动到产品图片后的效果。

首先很肯定的说，DW里提供的滑鼠功能不可用，想用也不是不可以，但需要跟淘宝开个什么开发员权限，一年交好象几百上千块的（具体忘了），还有一个方法是买模板，简单的说：money。

作为小卖家，赚钱不容易，许多事情还得亲力亲为，所以想实现这些高大尚功能，就老老实实的往下看吧。先介绍一下这段代码吧，由于小编是代码小白，所以有些用词不专业、但应该是小白能理解的，只要能明白就好，别太在意。还有我以下提到的这些都是需要修改的，其他没提到的用默认的就可以了。注意：代码是基于DW的表格排版方式应用的，所以小伙伴们要留意了。至于为什么说是表格排版方式才能用，看了之后就明白了。先看第一张图：定义代码名称。这个很重要，后面有两个地方的名称也要与这个名称一致（后面会提到），而且同一个模块，这个名称是不可以重复的，否则无法实现效果。

第二张图：定义单元格原始背景图片大小（这个大小应与表格单元格大小一致，否则版面就乱了。因此PS做图时应该特别留意）。这里说的原始背景图片指浏览时最初显示效果。

第三张图：定义单元格原始背景图片链接地址。这个应该好理解，就是这张图片存放的位置。

第四张图：对象名称修改。这里需要把这两个地方的名称，改成第一张图的名称即可。在第二个名称后面有两个数字，其实是定义显示 的坐标，不想改用默认的也可以。

第五张图：定义滑鼠后弹出图片的大小。也就是鼠标移动到该单元格位置时，弹出图片的大小。注：肯定要比前面原始图片大，否则没有“放大”效果，所以PS做图时要留意。

第六张图：定义滑鼠后弹出图片的调用地址。这个应该也很好理解了，跟前面一样，就是被调用图片的存放地址。

需要修改的代码就这些，看了之后，细心的小伙伴一定就明白，说是放大效果，其实就是通过滑鼠击发事件、再调用两张不一样大小的图片实现这个效果而已。好了，代码也介绍完了，最后实现这个效果就简单了，这里就不再截图了，过程就是：PS把整体大图做出来 => 切片（存成html文件+图片形式）=>DW打开html文件=>得到表格无缝拼成的大图=>把切片的小图上传图片空间并得到新的链接地址=>把新的链接地址替换DW里的切片链接地址=>把这段代码复制到相应需要做效果的单元格中=>根据前面介绍的步骤修改这段效果代码=>完成。

注意：大图切片时，需要做效果的地方合并成一张图片。

以下代码----》》》

<div class="sub all_t1" 

style="width:160px;height:107px;background:url(https://img.alicdn.com/imgextra/i3/59423979/TB2oVDMeFXXXXaoXpXXXXXXXXXX_!!59423979.jpg_160x160.jpg) no-repeat;"> 

<div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"> 

<div style="width:310px;height:207px;background:url(https://img.alicdn.com/imgextra/i3/59423979/TB2oVDMeFXXXXaoXpXXXXXXXXXX_!!59423979.jpg_310x310.jpg) no-repeat"></div> 

</div> 

</div>