插件:/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 { width: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   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{width: 67px; height: 67px; position: absolute;left: ;top: ; z-index: }

.ts_pro_section i img{display: block; border: ;}

.ts_pro_section .text{display: block; margin-left: 32px; width: 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{width: 133px;  background-position:  -291px;}

.ts_pro_section a.ts_pro_1:hover .text{width: 133px;background-position:  ;}

.ts_pro_section a.ts_pro_2 .text{background-position:  -362px;}

.ts_pro_section a.ts_pro_2:hover .text{background-position:  -74px;}

.ts_pro_section a.ts_pro_3 .text{background-position:  -434px;}

.ts_pro_section a.ts_pro_3:hover .text{background-position:  -147px;}

.ts_pro_section a.ts_pro_4 .text{background-position:  -505px;}

.ts_pro_section a.ts_pro_4:hover .text{background-position:  -220px;}

.tsbx_cont .ts_tit { width: 470px; margin:  auto; padding-top: 8px; font:40px/50px 'Microsoft Yahei'; text-align: center; font-weight: ; color:#; letter-spacing: 15px; border-bottom: 1px solid #7b8285; padding-bottom: 16px;}

.tsbx_cont .tsbx_txt_box{padding:  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:  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="" height="" 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="" height="" 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="" height="" 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="" height="" 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:});

        },function(){

            $(this).find('.rot_img').rotate({animateTo:});

        }).mouseleave();

    })

}();

</script>

</body>

</html>

JQ+rotate插件实现图片旋转，兼容IE7+ \ CHROME等浏览器的更多相关文章

  1. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...

  2. jQuery旋转插件jqueryrotate 图片旋转

    "jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...

  3. JQuery插件让图片旋转任意角度且代码极其简单

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...

  4. jQuery旋转插件jquery.rotate.js 让图片旋转

    演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...

  5. rotate.js实现图片旋转 （chrome,IE,firefox都可以实现）

    找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...

  6. 发布两款JQ小插件（图片查看器 + 分类选择器），开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  7. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  8. 【js】js 让图片旋转

     转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...

  9. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

随机推荐

  1. [译]SQL Server 之 索引基础

    SQL Server中,索引以B-tree的结构组织数据.B-tree代表平衡树,但是SQL Server使用一种叫做B+的树. B+树不是总是保持严格的平衡的树. 首先,索引有两个主要的部件:一个页 ...

  2. 学会使用Chromium中的LOG

    转自:http://blog.csdn.net/kuerjinjin/article/details/43937345 简介 众所周知chromium项目无比巨大,想去快速的了解,调试并添加自己想要的 ...

  3. sina sae 部署 java ssh 项目

    转自:http://jacobcookie.iteye.com/blog/1876798 1. 在sae上使用struts,需要添加的Listener,在com.company.listener中添加 ...

  4. Z.XML第二次迭代分数分配

    这是一篇简介的日志. 它关于二轮迭代Z-XML团队7名成员的分数分配. 每名成员的工作内容与之前的任务分工相同,即,大家都非常好的完成了计划的工作. 按照最初设定的分数分配原则,在今晚大家吃全家桶之前 ...

  5. ML 05、分类、标注与回归

    机器学习算法 原理.实现与实践 —— 分类.标注与回归 1. 分类问题 分类问题是监督学习的一个核心问题.在监督学习中,当输出变量$Y$取有限个离散值时,预测问题便成为分类问题. 监督学习从数据中学习 ...

  6. OD hit跟踪 run跟踪使用问题

    刚学习OD不久,现在使用HIT跟踪 run跟踪功能,在我的程序里碰到点问题,还请赐教 选了一部分代码添加到HIT跟踪,在选的代码处设置断点,程序运行到断点,按单步跟踪,当执行到第二个PUSH时,程序就 ...

  7. Python开发的10个小贴士

    下面是十个Python中很有用的贴士和技巧.其中一些是初学这门语言常常会犯的错误. 注意:假设我们都用的是Python 3 1. 列表推导式 你有一个list:bag = [1, 2, 3, 4, 5 ...

  8. C#环境下，文本框翻屏，怎么一直显示当前插入的内容！！！！！！！！！！！！！！！！

    //-----------------------显示当前插入的位置------------------------ textBox3.SelectionStart = textBox3.Text.L ...

  9. error opening trace file: No such file or directory (2) ,can't load transform_config.xml

    出现这个错误:error opening trace file: No such file or directory (2) ,can't load transform_config.xml 是因为没 ...

  10. vim 全局替换命令

    语法  :[addr]s/源字符串/目的字符串/[option]                     :%s/源字符串/目的字符串/c 全局替换命令为: :%s/源字符串/目的字符串/g [add ...