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

jquery 得到当前页面高度和宽度的两个函数

Feb 21 Javascript

js的逻辑运算符 ||

May 31 Javascript

添加JavaScript重载函数的辅助方法2

Jul 04 Javascript

用js代码和插件实现wordpress雪花飘落效果的四种方法

Dec 15 Javascript

浅谈JS运算符&&和|| 及其优先级

Aug 10 Javascript

JS添加或修改控件的样式(Class)实现方法

Oct 15 Javascript

node.js操作mysql简单实例

May 25 Javascript

JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)

Jun 09 Javascript

EasyUI中的dataGrid的行内编辑

Jun 22 Javascript

Vue.js构建你的第一个包并在NPM上发布的方法步骤

May 01 Javascript

layui table去掉右侧滑动条的实现方法

Sep 05 Javascript

JavaScrip如果基于url实现图片下载

Jul 03 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中并发读写文件冲突的解决方案

2013/10/25 PHP

2014最热门的24个php类库汇总

2014/12/18 PHP

PHP 实现代码复用的一个方法 traits新特性

2015/02/22 PHP

PHP保留两位小数的几种方法

2019/07/24 PHP

用js实现的页面关键字密度查询代码

2007/12/27 Javascript

javascript 获取所有id中包含某关键字的控件的实现代码

2010/11/25 Javascript

Javascript this 的一些学习总结

2012/08/02 Javascript

JavaScript中的逻辑判断符&&、||与!介绍

2014/12/31 Javascript

javascript实现无缝上下滚动特效

2015/12/16 Javascript

JS实现的多张图片轮流播放幻灯片效果

2016/07/22 Javascript

HTML5开发Kinect体感游戏的实例应用

2017/09/18 Javascript

利用jquery如何从json中读取数据追加到html中

2017/12/01 jQuery

vue实现验证码输入框组件

2017/12/14 Javascript

create-react-app修改为多页面支持的方法

2018/05/17 Javascript

在微信小程序中使用图表的方法示例

2019/04/25 Javascript

Openlayers显示地理位置坐标的方法

2020/09/28 Javascript

jQuery列表动态增加和删除的实现方法

2020/11/05 jQuery

[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇

2018/04/03 DOTA

Django1.3添加app提示模块不存在的解决方法

2014/08/26 Python

Python实现对excel文件列表值进行统计的方法

2015/07/25 Python

python机器学习实战之树回归详解

2017/12/20 Python

pandas.DataFrame.to_json按行转json的方法

2018/06/05 Python

python 求定积分和不定积分示例

2019/11/20 Python

Pytorch to(device)用法

2020/01/08 Python

jupyter notebook的安装与使用详解

2020/05/18 Python

CSS3制作气泡对话框的实例教程

2016/05/10 HTML / CSS

HTML5 Canvas实现玫瑰曲线和心形图案的代码实例

2014/04/10 HTML / CSS

Html5新标签datalist实现输入框与后台数据库数据的动态匹配

2017/05/18 HTML / CSS

HTML5实现无刷新修改URL的方法

2019/11/14 HTML / CSS

REISS英国官网：伦敦High Street最受欢迎品牌

2016/12/21 全球购物

亚马逊西班牙购物网站：amazon西班牙

2017/03/06 全球购物

匡威西班牙官网：Converse西班牙

2019/10/01 全球购物

金融专业个人求职信

2013/09/22 职场文书

小学秋季运动会报道稿

2014/09/30 职场文书

批评与自我批评发言稿

2014/10/15 职场文书

酒店前台接待岗位职责

2015/04/02 职场文书