关闭

点击实现图片旋转缩放

标签: 前端点击实现图片旋转缩放
120人阅读 评论(0) 收藏 举报
分类:
<!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>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5186次
    • 积分:186
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    最新评论