标签:
插件:/jquery.rotate.min.js
HTML代码:
<ul class="c" id="ts_pro_list"> | |
<li><a class="ts_pro_1" href="#" target="_blank" title="航班延误险" otitle="航班延误险-特色保险" otype="button" id="T-hbyw02"><i><img src="icon01.png" width="67" height="67" alt="航班延误险" class="rot_img" /></i><span class="text">航班延误险</span></a></li> | |
<li><a class="ts_pro_2" href="#" target="_blank" title="吃货旅游保险" otitle="吃货旅游保险-特色保险" otype="button" id="T-chlybx02"><i><img src="chihuo_icon01.png" width="67" height="67" alt="吃货旅游保险" class="rot_img" /></i><span class="text">吃货旅游保险</span></a></li> | |
<li><a class="ts_pro_3" href="#" target="_blank" title="萌牙少儿齿科" otitle="萌牙少儿齿科-特色保险" otype="button" id="T-qzlybx02"><i><img src="mengya_icon01.png" width="67" height="67" alt="萌牙少儿齿科" class="rot_img" /></i><span class="text">萌牙少儿齿科</span></a></li> | |
<li><a class="ts_pro_4" href="#l" target="_blank" title="骑行旅游保险" otitle="骑行旅游保险-特色保险" otype="button" id="T-qxlybx02"><i><img src="qixing_icon01.png" width="67" height="67" alt="骑行旅游保险" class="rot_img" /></i><span class="text">骑行旅游保险</span></a></li> | |
</ul> |
JQ代码:
!function(){ | |
var $pro = $(‘#ts_pro_list li‘); | |
$pro.each(function(ind,t){ | |
$(t).hover(function(){ | |
$(this).find(‘.rot_img‘).rotate({animateTo:45}); | |
},function(){ | |
$(this).find(‘.rot_img‘).rotate({animateTo:0}); | |
}).mouseleave(); | |
}) | |
}(); |
JQ+rotate插件实现图片旋转,兼容IE7+ \ CHROME等浏览器
标签:
原文地址:http://www.cnblogs.com/iicoo/p/5052253.html