div 내에서 이미지를 회전, 확대, 축소 및 드래그하는 방법

Yao Yao, Cheke Nao, 혼자서 코딩하는 것도 지겹고, 저런 버그들을 쌓아두는 것도 지겹습니다. 가을은 선선하고 공기도 건조해요 물 많이 드세요 이번주 지나면 또 갈게요 아직 며칠 남았으니 마음껏 얘기 나누세요~~

새해가 되어서 오랫동안 블로그를 업데이트하지 않았는데, 국경절이 다가오는 걸 보니 국경절이 지나면 설날을 기다리게 된다고 들었는데, 이제 막 지나간 것 같은 기분이 듭니다. 새해를 맞이했는데, 너무 안타까워서 소백주의 죽음을 애도하는 마음으로 글을 올리게 되었습니다...

개발 중 이런 상황이 발생하면 웹 애플리케이션의 특정 기능이 님이 업로드한 사진을 받게 됩니다. 실제 제작 과정에서 사용자가 업로드한 사진이 거꾸로 표시되거나, 업로드된 사진이 상대적으로 흐릿한 현상이 발생합니다.

1. 사진 각도 문제 해결

일반적인 원리는 매우 간단합니다. HTML 요소 개체(그림)의 클래스를 전환합니다. 다음 CSS 코드:

.rot1 {
    transform:rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot2 {
    transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot3 {
    transform:rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

그런 다음 간단한 JavaScript 코드를 추가합니다. 왼쪽 또는 오른쪽으로 회전하는지에 따라 클래스 이름을 동적으로 변경하면 됩니다. 다시 프롬프트하면 IE8 브라우저가 사용되며 아무 효과가 없습니다. -ms-filter直接filter
여기에서는 CSS3+filter 방법이 사용되므로 다음 공식은 하위 버전의 Firefox 및 현재 버전의 Opera 브라우저에는 영향을 미치지 않습니다. 그러나 이는 인터넷 사용자의 90% 이상에게 확실히 적용 가능합니다.

2. 사진 확대 및 축소

는 사진의 너비와 높이를 조정하는 것을 의미합니다. 다음 핵심 코드

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

3. 영역에 그림을 드래그하세요

그림이 상위 컨테이너 이상으로 확대되면 컨테이너에 그림을 드래그하는 것을 지원하며 조건에 따라 mousemove를 바인딩합니다. mousedown을 실행하고 Drag 영역 크기를 계산하는 핵심 코드는 다음과 같습니다.

 $(document).bind('mousemove.imgview', function (event) {
    if ($img.data('mousedown')) {
    var dx = event.pageX - settings['pageX'];
    var dy = event.pageY - settings['pageY'];
    if ((dx == 0) && (dy == 0)) {
    return false;
}
var newX = parseInt($img.css('left')) + dx;
    if (newX > 0) newX = 0;
    if (newX < settings[&#39;width&#39;] - $img.width()) newX = settings[&#39;width&#39;] - $img.width() + 1;
    var newY = parseInt($img.css(&#39;top&#39;)) + dy;
    if (newY > 0) newY = 0;
    if (newY < settings[&#39;height&#39;] - $img.height()) newY = settings[&#39;height&#39;] - $img.height() + 1;
    if (settings[&#39;width&#39;] >= $img.width()) {
    newX = settings[&#39;width&#39;] / 2 - $img.width() / 2;
}
if (settings[&#39;height&#39;] >= $img.height()) {
    newY = settings[&#39;height&#39;] / 2 - $img.height() / 2;
}
$img.css(&#39;left&#39;, newX + &#39;px&#39;);
    $img.css(&#39;top&#39;, newY + &#39;px&#39;);
    settings[&#39;pageX&#39;] = event.pageX;
    settings[&#39;pageY&#39;] = event.pageY;
    $img.data(&#39;cannot_minimize&#39;, true);
}
return false;
}
);

4. 실행하려면 하단의 데모를 다운로드하세요.

5. 최종 효과는 아래 그림과 같습니다.

위 내용은 div 내에서 이미지를 회전, 확대, 축소 및 드래그하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!