编程 Javascript

js实现鼠标滚轮控制图片缩放效果的方法

Posted in Javascript onFebruary 20, 2015

本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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-Language" content="zh-cn" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >

<title>用鼠标滚轮滚动控制图片的缩小放大</title>

<script language="javascript">

function bbimg(o){ 

var zoom=parseInt(o.style.zoom, 10)||100;

zoom+=event.wheelDelta/12;

if (zoom>0) o.style.zoom=zoom+'%';

return false;

}

</script>

</head>

<body>

<p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p>

<p><img border="0" src="/images/m01.jpg" onmousewheel="return bbimg(this)"></p>

<p>　</p>

<p>　</p>

<p>　</p>

</body>

</html>

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

js实现鼠标滚轮控制图片缩放效果的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 选择文件夹对话框(web)

Jul 07 Javascript

JS无法捕获滚动条上的mouse up事件的原因猜想

Mar 21 Javascript

基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享

Jun 24 Javascript

Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）

Jun 22 Javascript

关于JSON与JSONP简单总结

Aug 16 Javascript

vue.js实现条件渲染的实例代码

Jun 22 Javascript

Angular 2父子组件数据传递之@ViewChild获取子组件详解

Jul 04 Javascript

Vue中如何实现proxy代理

Apr 20 Javascript

Vue.js项目中管理每个页面的头部标签的两种方法

Jun 25 Javascript

layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

Sep 25 Javascript

JS实现简单随机3D骰子

Oct 24 Javascript

node中短信api实现验证码登录的示例代码

Jan 20 Javascript

IE及IE6浏览器中判断JS文件加载成功失败的方法

Feb 18 #Javascript

使用JavaScript开发IE浏览器本地插件实例

Feb 18 #Javascript

JQuery实现展开关闭层的方法

Feb 17 #Javascript

jQuery实现鼠标滑过Div层背景变颜色的方法

Feb 17 #Javascript

JS点击链接后慢慢展开隐藏着图片的方法

Feb 17 #Javascript

js实现按钮控制图片360度翻转特效的方法

Feb 17 #Javascript

js实现鼠标悬停图片上时滚动文字说明的方法

Feb 17 #Javascript

You might like

通过对服务器端特性的配置加强php的安全

2006/10/09 PHP

一贴学会PHP 新手入门教程

2009/08/03 PHP

PHP+MySQL删除操作实例

2015/01/21 PHP

PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】

2018/12/25 PHP

url地址自动加#号问题说明

2010/08/21 Javascript

Javascript控制页面链接在新窗口打开具体方法

2013/08/16 Javascript

html5 canvas js(数字时钟)实例代码

2013/12/23 Javascript

JavaScript打印网页指定区域的例子

2014/05/03 Javascript

14个有用的Jquery技巧分享

2015/01/08 Javascript

JS模仿腾讯图片站的图片翻页按钮效果完整实例

2016/06/21 Javascript

javascript 显示全局变量与隐式全局变量的区别

2017/02/09 Javascript

vue-router之nuxt动态路由设置的两种方法小结

2018/09/26 Javascript

Vue 列表上下过渡效果的实例代码

2019/06/25 Javascript

基于JS抓取某高校附近共享单车位置使用web方式展示位置变化代码实例

2019/08/27 Javascript

vue中使用element组件时事件想要传递其他参数的问题

2019/09/18 Javascript

Vue实现腾讯云点播视频上传功能的实现代码

2020/08/17 Javascript

使用jquery实现轮播图效果

2021/01/02 jQuery

[04:19]DOTA2亚洲邀请赛现场花絮

2015/03/11 DOTA

[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04

2020/11/04 DOTA

简介Python的collections模块中defaultdict类型的用法

2016/07/07 Python

python数据结构之线性表的顺序存储结构

2018/09/28 Python

pygame实现俄罗斯方块游戏（基础篇1）

2019/10/29 Python

解决Tensorboard 不显示计算图graph的问题

2020/02/15 Python

解决启动django,浏览器显示“服务器拒绝访问”的问题

2020/05/13 Python

opencv 阈值分割的具体使用

2020/07/08 Python

英国知名衬衫品牌美国网站：Charles Tyrwhitt美国

2016/08/28 全球购物

优秀毕业大学生推荐信

2013/11/13 职场文书

大学本科毕业生的自我鉴定

2013/11/26 职场文书

工厂保洁员岗位职责

2013/12/04 职场文书

《三个小伙伴》教学反思

2014/04/11 职场文书

农村党员一句话承诺

2014/05/30 职场文书

党支部对照检查材料

2014/08/25 职场文书

董事会决议范本

2015/07/01 职场文书

python-for x in range的用法(注意要点、细节)

2021/05/10 Python

oracle覆盖导入dmp文件的2种方法

2021/05/21 Oracle

云服务器部署 Web 项目的实现步骤

2022/06/28 Servers