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.validate表单验证插件使用详解
Jun 21 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现图片切换效果
Oct 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
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php格式文件打开的四种方法
2018/02/24 PHP
CI框架附属类用法分析
2018/12/26 PHP
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
python基础教程之Filter使用方法
2017/01/17 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
北大自主招生自荐信
2013/10/19 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
投诉书格式范本
2015/07/02 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL