<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_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" > |
| < div style = "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" > |
| < div style = "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" > |
| < div style = "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" > |
| < div style = "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" > |
| < div style = "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" > |
| < div style = "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/