码迷,mamicode.com
首页 > 其他好文 > 详细

JQ+rotate插件实现图片旋转,兼容IE7+ \ CHROME等浏览器

时间:2015-12-16 21:19:26      阅读:2161      评论:0      收藏:0      [点我收藏+]

标签:

插件:/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

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!