jQuery实现鼠标滚轮控制图片缩放


本文摘自PHP中文网,作者小云云,侵删。

本文主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下,希望能帮助到大家。

本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能。分享给大家供大家参考,具体如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!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>

运行效果:

阅读剩余部分

相关阅读 >>

jQuery中.post和.ajax的区别是什么

jQuery设置disabled属性与移除disabled属性

jQuery如何检查字符串中是否包含指定字符?

jQuery如何获取name属性值

jQuery怎么去除css属性

如何解决jQuery on 不生效问题

jQuery和bootstrap的区别是什么?

jQuery如何判断单选框是否选中

jQuery如何判断鼠标是否在某个元素内

jQuery如何查看元素是否绑定事件

更多相关阅读请进入《jQuery》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...