Bild zoomin-zoomout in Maus Bildlauf

Question

Ich habe ein Bild im Pop-up.Ich möchte Zoom-in und Zoom-out Bild auf Maus in HTML scrollen.So wie kann ich es tun, JavaScript oder jquery?

Answer 1

Dies kann man

Fügen Sie jQuery-Bibliothek, jQuery UI und jQuery imgViewer Hilfe auf der Seite

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="libs/jquery-ui.js"></script> 
<script type="text/javascript" src="src/imgViewer.js"></script> 

Mausrad Plugin Fügen und andere erforderliche Bibliotheken auf dem PGAE

<script type="text/javascript" src="libs/jquery.mousewheel.min.js"></script> 
<script src="jquery.fs.zoetrope.min.js"></script> 
<script src="hammer.min.js"></script> 
<script src="jquery.hammer.js"></script> 

Fügen Sie ein Bild auf Ihrer Webseite ein (Sie können Bildname und -größe ändern)

<img id="image1" src="1.jpg" width="600" /> 

Die Javascript (wenn Sie Bildnamen oben ändern Sie Namen von Abfrage ändern)

<script type="text/javascript"> 
;(function($) { 
$("#image1").imgViewer({ 
onClick: function(e, self) { 
var pos = self.cursorToImg(e.pageX, e.pageY); 
$("#position").html(e.pageX + " " + e.pageY + " " + pos.relx + " " + pos.rely); 
} 
}); 
})(jQuery); 
</script>