插件:/jquery.rotate.min.js
CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="WT.test_v" content="1.1.2:B"/>
<title>Client coordinates Example</title>
<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css"/>
<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>
<style>
/* --- 特色保险 2015.11.09 add by wongyizhi --- */
.tsbx_cont { 1200px; height:195px; background:url(http://pimg1.4008000000.com//app_images/4008000000/v20/index/tsbx_bg_v2.jpg) no-repeat; margin:30px auto 0; position:relative}
.tsbx_cont h3 {display: none;}
.ts_pro_section{padding: 27px 0 0 220px;}
.ts_pro_section ul li{ float: left; display: inline-block; height: 67px; margin-right: 25px;}
.ts_pro_section a{position: relative; display: block; height: 67px;}
.ts_pro_section a:hover{ text-decoration: none;}
.ts_pro_section i{ 67px; height: 67px; position: absolute;left: 0;top: 0; z-index: 10}
.ts_pro_section i img{display: block; border: 0;}
.ts_pro_section .text{display: block; margin-left: 32px; 152px; height: 67px; line-height: 67px; text-indent: 40px; color: #fff; font-size: 16px;font-family:'microsoft yahei'; background: url(http://pimg1.4008000000.com//app_images/4008000000/v20/index/tese_bg_icon.png) no-repeat; }
.ts_pro_section a.ts_pro_1 .text{ 133px; background-position: 0 -291px;}
.ts_pro_section a.ts_pro_1:hover .text{ 133px;background-position: 0 0;}
.ts_pro_section a.ts_pro_2 .text{background-position: 0 -362px;}
.ts_pro_section a.ts_pro_2:hover .text{background-position: 0 -74px;}
.ts_pro_section a.ts_pro_3 .text{background-position: 0 -434px;}
.ts_pro_section a.ts_pro_3:hover .text{background-position: 0 -147px;}
.ts_pro_section a.ts_pro_4 .text{background-position: 0 -505px;}
.ts_pro_section a.ts_pro_4:hover .text{background-position: 0 -220px;}
.tsbx_cont .ts_tit { 470px; margin: 0 auto; padding-top: 8px; font:40px/50px 'Microsoft Yahei'; text-align: center; font-weight: 400; color:#333333; letter-spacing: 15px; border-bottom: 1px solid #7b8285; padding-bottom: 16px;}
.tsbx_cont .tsbx_txt_box{padding: 0 15px; background-color: #e8f9ff; position: absolute; top: 157px; left: 425px;}
.tsbx_cont .ts_more {font:18px/26px 'Microsoft Yahei'; color:#fff; display:inline-block; background-color: #fa835c; border-radius: 13px; padding: 0 20px;}
.tsbx_cont .ts_more:hover { color:#fff; text-decoration:none}
.tsbx_cont .txt {font:18px/22px 'Microsoft Yahei'; color:#ff6633; padding-right: 10px; display: inline-block; white-space:nowrap; background-color: #e8f9ff;}
</style>
<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>
<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/4008000000/v20/jquery.rotate.min.js"></script>
</head>
<body>
<div class="tsbx_cont c">
<h3>特色保险</h3>
<div class="c ts_pro_section">
<ul class="c" id="ts_pro_list">
<li><a class="ts_pro_1" href="http://www.4008000000.com/zaixiangoumai/baoxian/hangyanxian.shtml" target="_blank" ><i><img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/hangyan_icon01.png" width="67" height="67" alt="航班延误险" class="rot_img" style="-webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%;"></i><span class="text">航班延误险</span></a>
</li>
<li><a class="ts_pro_2" href="http://www.4008000000.com/zaixiangoumai/baoxian/chihuolvyoubaoxian.shtml" target="_blank" title="吃货旅游保险" otitle="吃货旅游保险-特色保险" otype="button" id="T-chlybx02"><i><img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/chihuo_icon01.png" width="67" height="67" alt="吃货旅游保险" class="rot_img" style="-webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%;"></i><span class="text">吃货旅游保险</span></a>
</li>
<li><a class="ts_pro_3" href="http://www.4008000000.com/zaixiangoumai/baoxian/shaoerchikebaoxian.shtml" target="_blank" title="萌牙少儿齿科" otitle="萌牙少儿齿科-特色保险" otype="button" id="T-qzlybx02"><i><img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/mengya_icon01.png" width="67" height="67" alt="萌牙少儿齿科" class="rot_img" style="-webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%;"></i><span class="text">萌牙少儿齿科</span></a>
</li>
<li><a class="ts_pro_4" href="http://www.4008000000.com/zaixiangoumai/baoxian/qixinglvyoubaoxian.shtml" target="_blank" title="骑行旅游保险" otitle="骑行旅游保险-特色保险" otype="button" id="T-qxlybx02"><i><img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/qixing_icon01.png" width="67" height="67" alt="骑行旅游保险" class="rot_img" style="-webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%;"></i><span class="text">骑行旅游保险</span></a>
</li>
</ul>
</div>
<h2 class="ts_tit">贴心保障.玩乐无忧</h2>
<div class="tsbx_txt_box"> <span class="txt">平安为您私人定制</span><a href="http://www.4008000000.com/baoxianchanpin/tesebaoxian.shtml" target="_blank" title="查看更多" otitle="查看更多-特色保险" otype="button" id="T-ckgd02" class="ts_more">更多特色保险>></a>
</div>
</div>
<script>
// 特色保险图标旋转功能
!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();
})
}();
</script>
</body>
</html>