简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

jQuery makes mouse wheel operation picture zoom size

php中世界最好的语言
Release： 2018-04-19 15:20:38
Original
2425 people have browsed it

This time I will bring you jQueryHow to make a mouse wheel operationPictureZoom size, jQuery makes a mouse wheel operation picture zoom sizeNotesYes Which ones, the following are practical cases, let’s take a look. 

<!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>鼠标滚轮控制图片缩放</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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:



The above is the detailed content of jQuery makes mouse wheel operation picture zoom size. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
jquery operate
source：php.cn
Previous article：jQuery creates page mask layer effect Next article：jQuery+cookie achieves skin change effect
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
jQuery getting wrong value when getting data attribute I have a div with data attribute <divclass='p1'data-location='1'></div> I have...
From 2023-11-01 23:01:19
0
1
209
Support jQuery's Transfer-Encoding:chunked I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...
From 2023-10-25 23:44:37
0
1
230
How to get the natural dimensions of an image using JavaScript or jQuery? So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...
From 2023-10-21 13:53:08
0
2
275
Automatically expand text area I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...
From 2023-10-21 08:49:23
0
2
225
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！