编程 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 相关文章推荐

简单js代码实现selece二级联动(推荐)

Feb 18 Javascript

jQuery 仿百度输入标签插件附效果图

Jul 04 Javascript

jquery制作多功能轮播图插件

Apr 02 Javascript

JavaScript判断对象是否为数组

Dec 22 Javascript

原生js实现网易轮播图效果

Apr 10 Javascript

JavaScript prototype属性详解

Oct 25 Javascript

微信小程序开发（二）图片上传+服务端接收详解

Jan 11 Javascript

JavaScript对象引用与赋值实例详解

Mar 15 Javascript

VUE中v-on:click事件中获取当前dom元素的代码

Aug 22 Javascript

element-ui 的el-button组件中添加自定义颜色和图标的实现方法

Oct 26 Javascript

Makefile/cmake/node-gyp中区分判断不同平台的方法

Dec 18 Javascript

jQuery实现判断滚动条滚动到document底部的方法分析

Aug 27 jQuery

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