jQuery实现的鼠标滚轮控制图片缩放功能实例


Posted in jQuery onOctober 14, 2017

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

<!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>3water.com 鼠标滚轮控制图片缩放</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实现的鼠标滚轮控制图片缩放功能实例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
jQuery自动或手动图片切换效果
Oct 11 #jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
You might like
oracle资料库函式库
2006/10/09 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python 实现汉诺塔游戏
2020/11/28 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
班主任评语大全
2014/04/26 职场文书
2014年师德承诺书
2014/05/23 职场文书
小学生读书活动总结
2014/06/30 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android