jquery+jquery.rotate实现图片旋转效果
首先要下载jquery.min.js 和jquery.rotate.js文件
1、下载地址：
https://www.jb51.net/jiaoben/554113.html
2、导入文件
<script type="text/javascript" src="../js/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="../js/jQueryRotate.js"></script>
3、html界面
<body>
<div>
<h4>示例一：鼠标滑过旋转图片</h4>
<img id="img1" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例二：图片无限旋转</h4>
<img id="img2" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例三：点击图片旋转</h4>
<img id="img3" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例四：旋转不同角度图片</h4>
<img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>
<input type="button" value="顺时针旋转90度" onClick="ImgRotate(0)"/> <br/><br/>
<input type="button" value="逆时针旋转90度" onClick="ImgRotate(1)"/> <br/><br/>
<input type="button" value="顺时针旋转180度" onClick="ImgRotate(2)"/><br/><br/>
<input type="button" value="顺时针旋转270度" onClick="ImgRotate(3)"/><br/><br/>
</div> </body>
4、js脚本
<script>
$(function(){ //示例三：点击图片旋转角度（这段js放在示例一后面没有效果，暂不知原因）
var value = 0;
$("#img3").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
}); //示例一: 鼠标滑过旋转图片
$("#img1").rotate({
bind:{
mouseover : function() {
$(this).rotate({animateTo:180});
},
mouseout : function() {
$(this).rotate({animateTo:0});
}
}
}); //示例二：图片无限旋转
var angle = 0;
setInterval(function(){
angle+=3;
$("#img2").rotate(angle);
},10);
}); //示例四：图片旋转不同角度
var ImgRotate = function(i){
switch(i)
{
case 0:
$('#img4').rotate(90);
break;
case 1:
$('#img4').rotate(-90);
break;
case 2:
$('#img4').rotate(180);
break;
case 3:
$('#img4').rotate(270);
break;
}
} </script>
5、实现的效果
1）鼠标滑过旋转图片
2）图片无限旋转
3）点击图片旋转
4）图片旋转不同角度
jquery+jquery.rotate实现图片旋转效果的更多相关文章
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- 使用jQuery来检测远程图片文件是否存在
使用jQuery来检测远程图片文件是否存在 最近为我的憨豆人笑园添加图片功能时,遇到了这个问题,用户可以填写一个远程的图片地址,也可以上传一个本地图片.为了不浪费服务器的资源,我们需要在客户端先对用户 ...
- 使用jquery获取网页中图片的高度——解惑
jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
随机推荐
- python基础(13)-面向对象
类 类的定义和使用 # class Person: def __init__(self, name, age, gender): self.name = name self.age = age sel ...
- generatorConfiguration详解
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration ...
- 关于Oracle 10.2.0.5 版本应用SCN补丁14121009相关问题
环境:OEL 5.7 + Oracle 10.2.0.5 背景:Oracle发布的两篇关于2019年6月份将自动调整高版本数据库的SCN COMPATIBILITY的MOS文章引起了很多客户的恐慌,尤 ...
- CSRF与JSON
之前遇到提交json的请求想要进行csrf攻击都是用的闭合表单的方法,很笨很麻烦, 这次看到了别人的操作记录一下. 这里用到了ajax异步请求(但是这里我有个疑问就是:这里用到了cors跨域,是不是必 ...
- POI 导出文档整理
1 通过模板获取workbook public static Workbook getWorkBook(String templatePath) { try { InputStream in = ne ...
- spring internalTransactionAdvisor 事务 advisor 初始化过程
spring internalTransactionAdvisor 事务 advisor 初始化过程:
- Netty源码分析之服务端启动
Netty服务端启动代码: public final class EchoServer { static final int PORT = Integer.parseInt(System.getPro ...
- Bugku-CTF之flag在index里
Day15 flag在index里 http://123.206.87.240:8005/post/
- 剑指offer（37）数字在排序数组中出现的次数。
题目描述 统计一个数字在排序数组中出现的次数. 题目分析 这题用暴力解也可以过,不过面试官肯定期待更好的解法. 查找我们最熟悉的就是二分查找了,不过二分查找查找的数在数组中只有一个,我们这里却有很多个 ...
- 自动化测试系列：自动化测试KPI考评的一种方法
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6856204.html 众所周知,在IT ...