JQ+rotate插件实现图片旋转，兼容IE7+ \ CHROME等浏览器
插件:/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等浏览器的更多相关文章
- JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句 收藏 我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
- JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- rotate.js实现图片旋转 （chrome,IE,firefox都可以实现）
找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...
- 发布两款JQ小插件（图片查看器 + 分类选择器），开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
- jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
- 【js】js 让图片旋转
转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
随机推荐
- Maven使用笔记（五）Sonatype Nexus 搭建Maven 私服
1. 为什么使用Nexus 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地, 而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载 ...
- 练习prototype的实现
这个BLOG不错,我练习了一下代码. 感觉他是个高手. ======================== http://www.w3cfuns.com/notes/17398/35b250e9b392 ...
- sublime Emmet的用法及相关语法
本节来讲一下Emmet插件的用法及相关语法. Emmet插件极大的提高了编程员的编程速度,下面我们来讲讲它的具体语法: 一.生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 docty ...
- phpcms如何使用推荐位调用自定义字段
默认phpcms是无法使用推荐位调用自定义字段的 一般自定义字段默认添加在附表里(也可以添加在主表里),调用自定义字段时 加上moreinfo="1" 直接写{pc:content ...
- Stay教你程序员泡妞攻略
七天大长假,得瑟的人们又要粗来秀恩爱晒旅途了,苦逼的程序员们要么加班(说好的三倍呢),要么宅家自lu.想想都觉得悲哀.一来我们抱怨生活只有代码,二来只让代码充斥自己的生活.在Stay看来,学会生活要比 ...
- JVM的粗略简述
什么是Java虚拟机 虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.JVM屏蔽了与 ...
- node基础 --工具
npm //Node.js Package Manager 查询版本号:npm --version/npm version 查询模块:npm search <name> 查看模块相关信息 ...
- BZOJ2388 : 旅行规划
考虑分块,每块维护两个标记$ts,td$. 那么对于块中一个位置$i$,它的实际值为$i\times td+ts+v_i$. 修改的时候,对于整块,直接打标记,对于零散的暴力修改,然后重构凸壳,时间复 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- version `GLIBC_2.17' not found
@ 今天把一个linux程序布到线上服务器上时,运行不起来,下面是解决思路. @ 运行程序,报以下错误 root@iZ25uck2l28Z:/tmp/tmp# ./speed_test ./speed ...