Heim > Artikel > Web-Frontend > jQuery implementiert die Mausradsteuerung zum Zoomen von Bildern
jQuery implementiert die Mausradsteuerung zum Zoomen von Bildern
- 小云云Original
- 2018-01-29 10:24:452712Durchsuche
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!