So drehen, vergrößern, verkleinern und ziehen Sie Bilder innerhalb eines Div

Yaoyao, Cheke Nao, ich habe es satt, alleine zu programmieren, und ich habe es satt, diese Fehler stapelweise zu schreiben. Die Herbstluft ist frisch und die Luft ist trocken. Ich werde nach dieser Woche wiederkommen, aber Sie können so viel mit mir plaudern, wie Sie möchten >

Neujahr, Neujahr, ich habe schon lange keinen Blog mehr gepostet. Jetzt, wo der Nationalfeiertag naht, habe ich gehört, dass ich nach dem Nationalfeiertag auf die Chinesen warten muss Neues Jahr, aber ich habe das Gefühl, dass ich gerade das neue Jahr hinter mir habe, und ich werde einen Blog veröffentlichen, um Xiao Baiju meinen Dank auszudrücken ...

In einem Szenario während der Entwicklung empfängt eine bestimmte Funktion der Webanwendung Bilder, die von verschiedenen Benutzern hochgeladen wurden, und es gibt eine Bildanzeigefunktion im Hintergrund. Im eigentlichen Produktionsprozess werden die von Benutzern hochgeladenen Bilder invertiert oder Bilder sind unscharf, da sie aus großer Entfernung aufgenommen wurden.

1. Lösen Sie das Problem des Bildwinkels

Das Prinzip ist Ganz einfach: Wechseln Sie die Klasse des HTML-Elementobjekts (Bild). Der folgende CSS-Code:

.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);
}

Fügen Sie einfachen JavaScript-Code hinzu – ändern Sie den Namen der Klasse dynamisch, je nachdem, ob sie nach links oder rechts gedreht wird . Das ist es. Ich werde noch einmal daran erinnert, dass der IE8-Browser

direkt verwendet, um keine Wirkung zu erzielen. -ms-filterfilterHier wird die CSS3+Filter-Methode verwendet, sodass die niedrigere Version von Firefox keine Auswirkungen auf die aktuelle Version des Opera-Browsers hat. Aber es ist definitiv auf mehr als 90 % der Internetnutzer anwendbar.

2. Vergrößern oder verkleinern des Bildes

bedeutet, die Breite und Höhe des Bildes anzupassen. Der folgende Kerncode

  //放大缩小图片 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. Ziehen Sie das Bild innerhalb des Bereichs

Wenn das Bild über den übergeordneten Container hinaus vergrößert wird, wird das Ziehen des Bildes innerhalb des Containers unter Mousedown-Bedingungen unterstützt, um die Größe des Ziehbereichs zu berechnen:

 $(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;
}
);

Der umfassende Funktionsimplementierungscode lautet wie folgt: Laden Sie zum Ausführen die Demo unten herunter

5. Der endgültige Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonSo drehen, vergrößern, verkleinern und ziehen Sie Bilder innerhalb eines Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!