淘宝-鼠标滑过切换另一张图片

<div class="sub all_t1" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

        <divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

    </div>

</div>



<div class="sub all_t2" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

        <divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

    </div>

</div>



<div class="sub all_t3" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left">

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

        <divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

    </div>

</div>

鼠标滑过切换另一张图片

鼠标滑过时变换另一张图片，特别适合做一些T台展示，双面展示等等，要实现此功能那就必须要用到js特效，其实，我之前写的“淘宝装修可以使用JS代码吗”已经把核心代码写出来了。

今晚我重新编写了一下，尺寸是950宽度展示3个宝贝，宝贝尺寸是300px*300px。

效果展示：

使用说明：

要想使用此JS特效代码，必须进行源代码修改，而不能使用可视化视图修改，前面第一张背景为正常显示的图片，后面第二张背景为鼠标滑过时切换的图片。

视频教程：

全部代码如下：

<div class="sub all_t1" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

</div>

</div>

<div class="sub all_t2" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

</div>

</div>

<div class="sub all_t3" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)"></div>

</div>

</div>

完整版源代码如下：（可以加链接的）

<div class="sub all_t12" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)">

<a href="#" style="display:block;width:298px;height:298px;"target="_blank"></a></div>

</div>

</div>

<div class="sub all_t13" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left;margin-right: 20px">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)">

<a href="#" style="display:block;width:298px;height:298px;"target="_blank"></a></div>

</div>

</div>

<div class="sub all_t14" style="width:300px;height:300px;border:1px dashed #ccc;background:url(http://img04.taobaocdn.com/imgextra/i4/845309971/T23s6mXblaXXXXXXXX_!!845309971.jpg_310x310.jpg);float:left">

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

<divstyle="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/845309971/T2bFTmXldaXXXXXXXX_!!845309971.jpg_310x310.jpg)">

<a href="#" style="display:block;width:298px;height:298px;"target="_blank"></a></div>

</div>

</div>

  注解：由于淘宝后来会屏蔽JS 所以使用JS写的特效 放到淘宝也没有效果，但淘宝后台也提供了一些特效  只需按照说明调用即可  资料：http://open.taobao.com/doc/detail.htm?id=102084

另外说明下，由于原作者的视频就是  这个  没法改动了  所以就只能用原作者的 这个AQT的视频了，不过功能是完全可以实现的。

本文转载自：http://blog.taobaoux.com/archives/254/