In diesem Artikel wird hauptsächlich die von jQuery implementierte Bildzoomfunktion zur Mausradsteuerung vorgestellt. Er kombiniert ein vollständiges Beispiel zur Analyse der relevanten Implementierungstechniken von jQuery für den dynamischen Betrieb von Seitenelementattributen basierend auf dem Mausradereignis Ich hoffe, es kann allen helfen.
Das Beispiel in diesem Artikel beschreibt die von jQuery implementierte Bildzoomfunktion zur Mausradsteuerung. Teilen Sie es allen als Referenz mit. Die Einzelheiten lauten wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net 鼠标滚轮控制图片缩放</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 2; //可适合修改
if (zoom > 0) o.style.zoom = zoom + '%';
}
$(document).ready(function() {
$("img").bind("mousewheel",
function() {
zoomImg(this);
return false;
});
});
})
</script>
</head>
<body>
<center>
<img src="1.jpg"/>
</center>
</body>
</html>Betriebseffekt:
Verwandte Empfehlungen:
Teilen Sie die Verwendung des jQuery-Bildzoom-Plug-ins smartZoom
PHP-Bildverarbeitung mithilfe der Imagecopyresampled-Funktion, um ein Bildzoom-Beispiel zu erreichen
PHP-Bildzoom-Implementierungsmethode_PHP-Tutorial
Das obige ist der detaillierte Inhalt vonjQuery implementiert die Mausradsteuerung zum Zoomen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die JQuery-Plug-Ins?
So bedienen Sie JSON mit JQuery
So löschen Sie Elemente in JQuery
Verwendung der jQuery-Methode hover()
jquery implementiert die Paging-Methode
Was ist ein verstecktes Element in jquery?
Was wird in jquery hervorgehoben?
So aktivieren Sie die gleiche Stadtfunktion auf Douyin
