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

插件:/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();
	})
	}();

时间： 2024-08-06 10:15:00

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

jQuery旋转插件jqueryrotate 图片旋转

"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现. rotate(angle)angle参数:［Number］ – 默认为 0 根据给定的角度旋转图片例如:$(“#img”).rotate(45);或 $(‘#img’).rotate({angle:45

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

引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

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

演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ $(this).rotate({animateTo: 180}); }, mouseout : function(){ $(this).rotate({animateTo: 0}); } } }); 演示3 不停旋转 var angle = 0; setInterval(function(){ an

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

找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = function(angle,whence) { var p = this.get(0); // we store the angle inside the image tag for persistence if (!whence) { p.angle = ((p.angle==undefined?0:

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

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

javascript前端实现base64图片下载(兼容IE10+,chrome,firefox)

不是不兼容ie,就是不兼容ff,费了很多时间感谢原作者. 背景在项目开发过程中,经常会有图片导出的需求,尤其是带有图表类的应用,通常需要将图表下载导出. 在chrome等新版浏览器中实现base64图片的下载还是比较容易的: 创建一个a标签将a标签的href属性赋值为图片的base64编码指定a标签的download属性,作为下载文件的名称触发a标签的点击事件但是这套逻辑在IE下是不行的,这样写会直接报错. 所以IE下需要单独处理,这里IE在处理这种文件的时候给提供了一个单独的方法:

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

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. 多张图片切换,键盘左右键或左右箭头切换 2. 旋转 3. 放大,支持鼠标滚轮 4. 缩小,支持鼠标滚轮 5. 右下角缩略图 6. 拖拽大图 7. 全屏 PS:下面是插件各状态下效果,demo示例会在最后放出来. 全屏全屏是容器的最大化. 缩小可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片. 放

【js】js 让图片旋转

转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMe

一个很炫的灯箱插件，兼容IE7+

由于工作上需要一个灯箱插件,需要缩放图片与拖拽图片的功能,网上找遍了也没找着合适的,于是,自己动手,丰衣足食! 代码已托管到github,童鞋们自己去下载,里面有demo使用样例,很容易使用,代码也没做混淆,兼容IE7+以及所有现代浏览器. https://github.com/yanglang1987500/lightbox 如果大家觉得有惊喜,有被震撼到的话,还希望大家能在下方评论区给点个赞,毕竟这个我也费了不少精力编写,特别是缩放部分偏移算法的处理,有兴趣的童鞋可以看看. 截图如下: 版权