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

Ajax+Json 级联菜单实现代码

Oct 27 Javascript

5个可以帮你理解JavaScript核心闭包和作用域的小例子

Oct 08 Javascript

node.js中的http.response.setHeader方法使用说明

Dec 14 Javascript

jQuery实现html表格动态添加新行的方法

May 28 Javascript

理解javascript封装

Feb 23 Javascript

Javascript动画效果（4）

Oct 11 Javascript

jquery select2的使用心得(推荐)

Dec 04 Javascript

vue form 表单提交后刷新页面的方法

Sep 04 Javascript

ElementUI radio组件选中小改造

Aug 12 Javascript

Layui选项卡制作历史浏览记录的方法

Sep 28 Javascript

vue实现移动端拖动排序

Aug 21 Javascript

JS实现页面侧边栏效果探究

Jan 08 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

德劲1107的电路分析与打磨

2021/03/02 无线电

对盗链说再见...

2006/10/09 PHP

PDO预处理语句PDOStatement对象使用总结

2014/11/20 PHP

PHP实现事件机制的方法

2015/07/10 PHP

PHP实现的激活用户注册验证邮箱功能示例

2017/06/06 PHP

PHP基于SimpleXML生成和解析xml的方法示例

2017/07/17 PHP

jQuery 使用个人心得

2009/02/26 Javascript

html页面显示年月日时分秒和星期几的两种方式

2013/08/20 Javascript

JavaScript中创建对象和继承示例解读

2014/02/12 Javascript

z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

2014/11/16 Javascript

jquery实现手机号码选号的方法

2015/07/31 Javascript

javascript高级选择器querySelector和querySelectorAll全面解析

2016/04/07 Javascript

Bootstrap标签页（Tab）插件使用方法

2017/03/21 Javascript

vue下跨域设置的相关介绍

2017/08/26 Javascript

CheckBox多选取值及判断CheckBox选中是否为空的实例

2017/10/31 Javascript

JavaScript创建对象的常用方式总结

2018/08/10 Javascript

生成无限制的微信小程序码的示例代码

2019/09/20 Javascript

Vue中this.$nextTick的作用及用法

2020/02/04 Javascript

js实现无限层级树形数据结构(创新算法)

2020/02/27 Javascript

简介二分查找算法与相关的Python实现示例

2015/08/26 Python

Python正则获取、过滤或者替换HTML标签的方法

2016/01/28 Python

Python中enumerate函数代码解析

2017/10/31 Python

Python读取Pickle文件信息并计算与当前时间间隔的方法分析

2019/01/30 Python

十分钟搞定pandas(入门教程)

2019/06/21 Python

Django工程的分层结构详解

2019/07/18 Python

Python如何获取Win7，Win10系统缩放大小

2020/01/10 Python

pandas实现excel中的数据透视表和Vlookup函数功能代码

2020/02/14 Python

Python实现SMTP邮件发送

2020/06/16 Python

pycharm 实现光标快速移动到括号外或行尾的操作

2021/02/05 Python

详解CSS3的图层阴影和文字阴影效果使用

2016/06/09 HTML / CSS

信息专业个人的自我评价

2013/12/27 职场文书

父母对孩子说的话

2014/04/12 职场文书

给校长的建议书100字

2014/05/16 职场文书

法院授权委托书范文

2014/08/02 职场文书

防灾减灾活动总结

2014/08/30 职场文书

动画《朋友游戏》公开佐藤友生绘制的开播纪念绘

2022/04/06 日漫