点击实现图片旋转缩放

原创 2016年06月01日 15:00:29
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script src="jquery-1.11.3.js"></script>
<script>

window.onload = function(){
/*
*旋转
*/
//jquery
var current = 0;
$("#rotate").click (function(){
current = (current-90)%360;
$("#target").css("transform","rotate("+current+"deg)");
});



/*
*缩放
*/
//缩小
var img = $("#target");//获取操作元素
$("#little").click (function(){
  var oWidth=img.width(); //取得图片的实际宽度
  var oHeight=img.height(); //取得图片的实际高度
  if(img.width()>100||img.height()>75){//判断如果图片缩小到原图大小就停止缩小(100和75分别为原图的宽高)
 img.width(oWidth - 50);
     img.height(oHeight - 50/oWidth*oHeight);
  }  
});


//放大
$("#big").click (function(){
  var oWidth=img.width();//取得图片的实际宽度
  var oHeight=img.height(); //取得图片的实际高度
  img.width(oWidth + 50);
  img.height(oHeight + 50/oWidth*oHeight);
});





};
</script>
</head>
<body>
<img id ="target" src="Desert.jpg" alt="" style="width:100px;">
<input type="button" id="rotate" value="旋转" >
<input type="button" id="little" value="缩小">
<input type="button" id="big" value="放大">
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

图片旋转缩放触控

  • 2013年08月30日 11:18
  • 367KB
  • 下载

js控制截取图片旋转缩放

  • 2016年10月25日 17:16
  • 1.18MB
  • 下载

Android之UI学习篇六:ImageView实现图片旋转和缩放

这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大、缩小、旋转的功能。 android:sacleType属性指定ImageVIew控件显示...

图片旋转缩放控件,亲测可用

  • 2015年08月13日 14:06
  • 1.62MB
  • 下载

iOS图片旋转缩放demo

  • 2015年04月01日 15:26
  • 409KB
  • 下载

ImageView实现图片旋转和缩放

原文地址:http://blog.csdn.net/wulianghuan/article/details/8585990 这一篇,给大家介绍一下ImageView控件的使用,Ima...

[Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现

最近在一个3D汽车虚拟展示的项目,将其中的汽车开门关门的脚本简单的介绍一下吧,主要的原理就是通过从摄像机发射一个到屏幕点击的位置的一个射线,然后判断这个射线是否碰到你想要碰到的位置,如果碰到则实现逻辑...

图片任意角旋转缩放

  • 2012年10月29日 13:54
  • 98KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:点击实现图片旋转缩放
举报原因:
原因补充:

(最多只允许输入30个字)