编程 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 点击按钮弹出另一页，选择值后，返回到当前页

May 26 Javascript

基于JQuery的一个简单的鼠标跟随提示效果

Sep 23 Javascript

扩展jQuery对象时如何扩展成员变量具体怎么实现

Apr 25 Javascript

jQuery实现下拉框左右移动（全部移动，已选移动）

Apr 15 Javascript

iscroll实现下拉刷新功能

Jul 18 Javascript

JS+Canvas绘制动态时钟效果

Nov 10 Javascript

基于vue.js实现的分页

Mar 13 Javascript

layui使用数据表格实现购物车功能

Jul 26 Javascript

vuex实现数据状态持久化

Nov 11 Javascript

Vue中引入svg图标的两种方式

Jan 14 Vue.js

深入讲解Vue中父子组件通信与事件触发

Mar 22 Vue.js

VUE解决跨域问题Access to XMLHttpRequest at

May 06 Vue.js

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基础学习笔记

2007/03/18 PHP

深入PHP curl参数的详解

2013/06/17 PHP

php遍历文件夹所有文件子文件夹函数代码

2013/11/27 PHP

Yii视图操作之自定义分页实现方法

2016/07/14 PHP

自制PHP框架之设计模式

2017/05/07 PHP

实例讲解PHP表单验证功能

2019/02/15 PHP

对采用动态原型方式无法展示继承机制得思考

2009/12/04 Javascript

JavaScript之自定义类型

2012/05/04 Javascript

js网页中的(运行代码)功能实现思路

2013/02/04 Javascript

javascript禁用Tab键脚本实例

2013/11/22 Javascript

将查询条件的input、select清空

2014/01/14 Javascript

JS仿淘宝实现的简单滑动门效果代码

2015/10/14 Javascript

实例详解ECMAScript5中新增的Array方法

2016/04/05 Javascript

星期几的不同脚本写法(推荐)

2016/06/01 Javascript

Javascript中构造函数要注意的一些坑

2017/01/23 Javascript

Angular 4依赖注入学习教程之简介（一）

2017/06/04 Javascript

二维码图片生成器QRCode.js简单介绍

2017/08/18 Javascript

vue-star评星组件开发实例

2018/03/01 Javascript

vue监听键盘事件的快捷方法【推荐】

2018/07/11 Javascript

node.js学习笔记之koa框架和简单爬虫练习

2018/12/13 Javascript

深入解析Vue源码实例挂载与编译流程实现思路详解

2019/05/05 Javascript

使用JavaScript计算前一天和后一天的思路详解

2019/12/20 Javascript

[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16

2019/08/18 DOTA

在Python 字典中一键对应多个值的实例

2019/02/03 Python

python使用paramiko模块通过ssh2协议对交换机进行配置的方法

2019/07/25 Python

使用Python制作缩放自如的圣诞老人(圣诞树)

2019/12/25 Python

html5应用缓存_动力节点Java学院整理

2017/07/13 HTML / CSS

使用HTML5中的contentEditable来将多行文本自动增高

2016/03/01 HTML / CSS

CHARLES & KEITH台湾官网：新加坡时尚品牌

2019/07/30 全球购物

中专毕业生自我鉴定范文

2013/11/09 职场文书

大学新生军训感言

2014/02/25 职场文书

员工工作能力评语

2014/12/31 职场文书

给男朋友的道歉短信

2015/05/12 职场文书

CSS中em的正确打开方式详解

2021/04/08 HTML / CSS

解决redis sentinel 频繁主备切换的问题

2021/04/12 Redis

python中取整数的几种方法

2021/11/07 Python