Home > Article > Web Front-end > jQuery implements mouse wheel control of picture zooming
jQuery implements mouse wheel control of picture zooming
- 小云云Original
- 2018-01-29 10:24:452634browse
This article mainly introduces the mouse wheel control image zoom function implemented by jQuery, and analyzes the related implementation techniques of jQuery based on the mouse wheel mousewheel event for dynamic operation of page element attributes. Friends in need can refer to it. I hope it can help. to everyone.
The example in this article describes the mouse wheel control image zoom function implemented by jQuery. Share it with everyone for your reference, the details are as follows:
<!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>Running effect:
Related recommendations:
jQuery image zoom plug-in smartZoom usage method sharing
PHP image processing using the imagecopyresampled function to achieve image zoom example
php Image scaling implementation method_PHP tutorial
The above is the detailed content of jQuery implements mouse wheel control of picture zooming. For more information, please follow other related articles on the PHP Chinese website!