Cet article présente principalement la fonction de zoom de l'image de contrôle de la molette de la souris implémentée par jQuery et analyse les techniques d'implémentation associées de jQuery basées sur l'événement mousewheel pour le fonctionnement dynamique des attributs des éléments de page sur la base de l'exemple de formulaire complet. Les amis qui en ont besoin peuvent le faire. référez-vous à cela. J'espère que cela pourra aider tout le monde.
L'exemple de cet article décrit la fonction de zoom de l'image de contrôle de la molette de la souris implémentée par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
<!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>Effet de l'opération :
Recommandations associées :
Partage de la façon d'utiliser le plug-in de zoom d'image jQuery smartZoom
Méthode d'implémentation du zoom d'image PHP_Tutoriel PHP
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Qu'est-ce qu'un ETF Bitcoin Futures ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
