点击实现图片旋转缩放

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单

前天帮祥哥他女票做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单。 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过se...
  • ls1792304830
  • ls1792304830
  • 2017年05月20日 13:22
  • 1896

实现点击图片放大全屏

最近遇到这个问题,点击图片,让图片全屏。参考了一些博客和源码,大概明白了是怎么实现这个效果的。 这里就简单说明一下: 原理和之前的实现修改头像有点类似:修改头像的时候,我们给imageView添加...
  • helloworld183
  • helloworld183
  • 2016年05月09日 16:17
  • 1493

使用JS实现单击连接保存图片

使用JS实现单击连接保存图片2种形式都可以第一种: function SaveAs5(imgURL) { var oPop = window.open(imgURL,"","width=1, heig...
  • forest_fire
  • forest_fire
  • 2016年03月21日 11:08
  • 6799

angularjs上传图片时预览-点击图片放大

承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//enlargePi...
  • sinat_36146776
  • sinat_36146776
  • 2017年02月21日 18:03
  • 2631

前端jquery实现图片点击放大缩小

利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度...
  • gjq1993
  • gjq1993
  • 2017年02月15日 17:37
  • 1848

java实现点击的图片验证码

这是我写的图片点击的验证码,费了好大的劲。 直接上图: 这个验证码丑了点,大家将就这看吧,或许将来用的到。写个博客留念。直接服务端源码 package com.gt.gtop.controller; ...
  • qq_31410239
  • qq_31410239
  • 2017年07月31日 10:24
  • 697

JQuery实现点击图片更换图片

作为一位一直从事后端开发的码农,忽然开始接触前端的内容,真有点转不过来,还是来写点东西作为记录吧,也算是经验的积累了。项目中上传图片功能完成后,运营同事说需要有更换图片的功能,便于图片排版,好吧,不得...
  • u011234605
  • u011234605
  • 2015年06月24日 16:19
  • 6931

angularjs点击图片放大显示,点击关闭缩小显示

HTML代码 身份证正面照片 身份证反面照片 //...
  • sinat_36146776
  • sinat_36146776
  • 2017年02月16日 23:08
  • 2049

js实现点击更换图片

看到很多技术大牛都在写技术博客,作为刚刚入职的一名应届生,我想这是一种好习惯。大概在一个月前有了这样的想法,但是却一直没有实施,说起来真惭愧。今天终于决定发一篇文章,作为一个新的开始。如果这文章有幸被...
  • u014703834
  • u014703834
  • 2014年06月17日 08:45
  • 4711

点击某个按钮切换图片、文字描述(按钮颜色跟着改变)(简化代码)

html: 数量正在加载... 文字正在加载... css:body {background-color: #333;} ul {padding: 0;margin...
  • erdouzhang
  • erdouzhang
  • 2017年07月07日 16:11
  • 495
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:点击实现图片旋转缩放
举报原因:
原因补充:

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