Maison > Article > interface Web > jQuery implémente le contrôle de la molette de la souris pour le zoom de l'image
jQuery implémente le contrôle de la molette de la souris pour le zoom de l'image
- 小云云original
- 2018-01-29 10:24:452635parcourir
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!