jQuery圖片放大和旋轉效果

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了圖片旋轉和放大的效果。

拖動底部滑動條可以調整拓片的大小，滑鼠旋轉圖片可以實現圖片旋轉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  -webkit-user-select:none;
}
.editeImgMain{
  position:absolute;
  width:400px;
  height:300px;
  top:50%;
  left:50%;
  margin:-150px 0px 0px -200px;
  box-shadow:rgba(0,0,0,0.2) 0px 0px 0px 1px;
  display:table;
}
.editeImgMain .operationBar{
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
}
.editeImgMain .operationBar .rotateBar{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin:-50px;
  pointer-events: none;
}
.editeImgMain .operationBar .rotateBar span{
  position:absolute;
  font-size:12px;
  color:#fff;
}
.editeImgMain .operationBar .rotateBar .tip0{
  top:0px;
  left:50%;
  margin:0px -5px
}
.editeImgMain .operationBar .rotateBar .tip90{
  top:50%;
  right:0px;
  margin:-5px -10px;
}
.editeImgMain .operationBar .rotateBar .tip180{
  bottom:0px;
  left:50%;
  margin:0px -10px;
}
.editeImgMain .operationBar .rotateBar .tip270{
  top:50%;
  left:0px;
  margin:-5px 0px;
}
.editeImgMain .operationBar .rotateBar .rotateHandle{
  box-shadow:rgba(255,255,255,1.0) 0px 0px 0px 4px;
  width:100px;
  height:100px;
  border-radius:50%;
  background-image:url('demo/jQuery/img/rotate.gif');
  background-size:50px;
  background-position:center;
  background-repeat:no-repeat;
}
.editeImgMain .scaleBar{
  position:absolute;
  bottom:0px;
  width:200px;
  left:50%;
  margin:-20px -100px;
  z-index:100;
}
.editeImgMain .scaleBar .scaleInput{
  width:100%;
}
.editeImgMain .innerImg{
  display:table-cell;
  vertical-align:middle;
}
.editeImgMain .innerImg img{
  max-width:100%;
  max-height:100%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
  //旋轉
  var mouseState = 'up';
  var rotateHandleJQO;
  var innerImgJQO;
  var mouseX;
  var mouseY;
  var imgCenterX;
  var imgCenterY;
  var startAngle = 0;
  var rotateAngle = 0;
  var anagleResult;
 
  var startScale = 1;
  var scaleResult = 1;
 
  $('.operationBar').on('mousedown', function() {
    mouseState = 'down';
    rotateHandleJQO = $('.rotateHandle');
    innerImgJQO = $('.innerImg');
    imgCenterX = rotateHandleJQO.offset().left + rotateHandleJQO.width() / 2;
    imgCenterY = rotateHandleJQO.offset().top + rotateHandleJQO.height() / 2;
    startAngle = anagleResult;
    startScale = scaleResult;
    console.log('startAngle', startAngle);
  })
  $(document).on('mouseup', function() {
    mouseState = 'up';
    if (Math.abs(360 - anagleResult) < 10 || Math.abs(0 - anagleResult) < 10) {
      anagleResult = 0;
      rotateAngle = 0;
      innerImgJQO.css('transform', 'rotate(0deg) scale(' + startScale + ')');
      rotateHandleJQO.css('transform', 'rotate(0deg)');
    } else if (Math.abs(90 - anagleResult) < 10) {
      anagleResult = 90;
      rotateAngle = 90;
      innerImgJQO.css('transform', 'rotate(90deg) scale(' + startScale + ')');
      rotateHandleJQO.css('transform', 'rotate(90deg)');
    } else if (Math.abs(180 - anagleResult) < 10) {
      anagleResult = 180;
      rotateAngle = 180;
      innerImgJQO.css('transform', 'rotate(180deg) scale(' + startScale + ')');
      rotateHandleJQO.css('transform', 'rotate(180deg)');
    } else if (Math.abs(270 - anagleResult) < 10) {
      anagleResult = 270;
      rotateAngle = 270;
      innerImgJQO.css('transform', 'rotate(270deg) scale(' + startScale + ')');
      rotateHandleJQO.css('transform', 'rotate(270deg)');
    }
  })
  $(document).on('mousemove', function(e) {
    if (mouseState == 'down') {
      mouseX = e.pageX;
      mouseY = e.pageY;
      rotateAngle = getRotateAngle(mouseX, mouseY, imgCenterX, imgCenterY, startAngle);
 
      innerImgJQO.css('transform', 'rotate(' + rotateAngle + 'deg) scale(' + startScale + ')');
      rotateHandleJQO.css('transform', 'rotate(' + rotateAngle + 'deg)');
      startAngle = rotateAngle;
    }
  })
 
  function getRotateAngle(x, y, imgCenterX, imgCenterY, startAngle) {
    console.log(mouseX, mouseY, imgCenterX, imgCenterY, startAngle)
    anagleResult = Math.atan(Math.abs(x - imgCenterX) / Math.abs(y - imgCenterY));
 
    anagleResult = anagleResult * 180 / Math.PI;
    console.log('anagleResult1', anagleResult);
    if (x > imgCenterX && y > imgCenterY) {
      console.log('第4象限');
      anagleResult = 180 - anagleResult;
    } else if (x > imgCenterX && y < imgCenterY) {
      console.log('第1象限');
    } else if (x < imgCenterX && y < imgCenterY) {
      console.log('第2象限');
      anagleResult = 360 - anagleResult;
    } else {
      console.log('第3象限');
      anagleResult = 180 + anagleResult;
    }
    console.log('anagleResult2', anagleResult);
    return anagleResult;
  }
 
 
  //縮放
  $('.scaleInput').on('mousemove', function() {
    scaleResult = $(this).val() / 100;
    console.log(scaleResult);
    startScale = scaleResult;
    rotateHandleJQO = $('.rotateHandle');
    innerImgJQO = $('.innerImg');
    innerImgJQO.css('transform', 'rotate(' + rotateAngle + 'deg) scale(' + startScale + ')');
  })
})
</script>
</head>
<body>
<div class="editeImgMain">
  <div class="operationBar">
    <div class="rotateBar">
          <div class="rotateHandle"></div>
          <span class="tip0">0°</span>
          <span class="tip90">90°</span>
          <span class="tip180">180°</span>
          <span class="tip270">270°</span>
        </div>
  </div>
  <div class="scaleBar">
    <input type="range" class="scaleInput" max=200 min=0/>
  </div>
  <div class="innerImg">
    <img src="demo/jQuery/img/green.jpg" />
  </div>
</div>
</body>
</html>

相關文章