How to rotate, zoom in, zoom out, drag and drop images inside div

Medicine, Spacek, a person I code tired, tired of the bug written piles. Crisp and dry air you must have a lot of water, after this week I will go back, while there are a few days, you heartily come to me godless ~ ~ ~

The new year, a long time no more blog, see 11 to come, heard of 11 on the Chinese New Year, but feel just after the year, the heart dejected, more Bo a table on the small fleeting of the rapid chat to comfort under ...

In the development of such a scenario, a Web application function will receive from the various users upload pictures, backstage has a picture view function, the actual production process results appear in the user uploaded images are inverted or the picture because of long-distance shooting upload more ambiguous situation.

1, solve The problem of picture angle

The approximate principle is simply to toggle the class of the HTML element object (picture). The following 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);}

Add a simple JavaScript code--depending on whether you change the name of the class dynamically by turning left or right. Again, the IE8 browser is using a -ms-filter direct filter no effect.
Here is the method of using the Css3+filter filter, so the lower version of Firefox in the current version of the Opera browser is not effective. But it definitely applies to over 90% of internet users.

2. Enlarge and reduce picture

That is to adjust the width and height of the picture. The following core code

  Zoom out Picture function imgtosize (size) {    var img = $ ("#rotImg");    var owidth = Img.width ();    Get the actual width of the picture var oheight = Img.height ();    Get the actual height of the picture img.width (owidth + size);    Img.height (oheight + size/owidth * oheight);}

3. Drag the picture in the area

When the picture is enlarged beyond the parent container, the support picture is dragged inside the container, the MouseMove is bound under the MouseDown condition, the size of the dragged area is calculated, and the core code is as follows:

 $ (document). Bind (' Mousemove.imgview ', function (event) {if ($img. Data (' MouseDown ')) {var dx = Event.pagex-setti    ngs[' 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[' width ')-$img. Width ()) newx = settings[' width ')-$img. Width () + 1;    var newy = parseint ($img. CSS (' top ') + dy;    if (Newy > 0) newy = 0;    if (Newy < settings[' height ')-$img. Height ()) newy = settings[' height ')-$img. Height () + 1; if (settings[' width ') >= $img. Width ()) {newx = settings[' width ']/2-$img. Width ()/2;} if (settings[' height '] >= $img. Height ()) {newy = settings[' height ']/2-$img. Height ()/2;}    $img. CSS (' left ', newx + ' px ');    $img. CSS (' top ', Newy + ' px ');    settings[' PageX '] = Event.pagex;    settings[' pagey '] = event.pagey; $img. Data (' Cannot_minimize ', true);} return false;});

4, integrated function implementation code as follows, run please download demo at the bottom

<! DOCTYPE html>
5, the final effect as shown: