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

如何设置iframe高度自适应在跨域情况下的可用方法

Sep 06 Javascript

Jquery实现地铁线路指示灯提示牌效果的方法

Mar 02 Javascript

基于Jquery实现表单验证

Jul 20 Javascript

JavaScript判断表单中多选框checkbox选中个数的方法

Aug 17 Javascript

javaScript中的原型解析【推荐】

May 05 Javascript

深入浅析JavaScript中with语句的理解

May 12 Javascript

详解Angualr 组件间通信

Jan 21 Javascript

jQuery选择器之子元素选择器详解

Sep 18 jQuery

Three.js利用顶点绘制立方体的方法详解

Sep 27 Javascript

JS实现简易换图时钟功能分析

Jan 04 Javascript

浅谈vue 单文件探索

Sep 05 Javascript

js简单遍历获取对象中的属性值的方法示例

Jun 19 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

德生PL330测评

2021/03/02 无线电

手把手教你使用DedeCms的采集的图文教程

2007/03/11 PHP

使用eAccelerator加密PHP程序

2008/10/03 PHP

smarty模板引擎之分配数据类型

2015/03/30 PHP

PHP如何将log信息写入服务器中的log文件

2015/07/29 PHP

thinkPHP中钩子的使用方法实例分析

2017/11/16 PHP

PHP使用curl_multi实现并发请求的方法示例

2018/04/29 PHP

浅谈关于JavaScript的语言特性分析

2013/04/11 Javascript

JQuery+CSS提示框实现思路及代码(纯手工打造)

2013/05/07 Javascript

javascript实现playfair和hill密码算法

2014/12/07 Javascript

使用AngularJS实现表单向导的方法

2015/06/19 Javascript

nodejs加密Crypto的实例代码

2016/07/07 NodeJs

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

2016/08/10 Javascript

JavaScript中的await/async的作用和用法

2016/10/31 Javascript

JQuery学习总结【一】

2016/12/01 Javascript

详解vue2 $watch要注意的问题

2017/09/08 Javascript

JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

2018/04/21 Javascript

vue组件实现可搜索下拉框扩展

2020/10/23 Javascript

layui实现数据表格table分页功能（ajax异步）

2019/07/27 Javascript

Vue.js 无限滚动列表性能优化方案

2019/12/02 Javascript

简述Python中的面向对象编程的概念

2015/04/27 Python

Python编写电话薄实现增删改查功能

2016/05/07 Python

python中将正则过滤的内容输出写入到文件中的实例

2018/10/21 Python

在Python中pandas.DataFrame重置索引名称的实例

2018/11/06 Python

python代码xml转txt实例

2020/03/10 Python

Python3爬虫里关于识别微博宫格验证码的知识点详解

2020/07/30 Python

JustFab加拿大：女鞋、靴子、手袋和服装在线

2018/05/18 全球购物

经销商订货会主持词

2014/03/27 职场文书

祖国在我心中演讲稿500字

2014/05/04 职场文书

会计学毕业生求职信

2014/06/25 职场文书

原料仓仓管员岗位职责

2014/07/08 职场文书

师范毕业生求职信

2014/07/11 职场文书

中秋节活动总结

2014/08/29 职场文书

高中毕业典礼演讲稿

2014/09/09 职场文书

开除通知书范本

2015/04/25 职场文书

Go调用Rust方法及外部函数接口前置

2022/06/14 Golang