编程 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小技巧

Mar 07 Javascript

基于jquery实现的可编辑下拉框实现代码

Aug 02 Javascript

Javascript获取当前日期的农历日期代码

Oct 08 Javascript

javascript修改图片src的方法

Jan 27 Javascript

Jquery修改image的src属性,图片不加载问题的解决方法

May 17 Javascript

Ionic快速安装教程

Jun 03 Javascript

jquery文字填写自动高度的实现方法

Nov 07 Javascript

JS字符串统计操作示例【遍历,截取,输出,计算】

Mar 27 Javascript

vue插件vue-resource的使用笔记（小结）

Aug 04 Javascript

Windows下支持自动更新的Electron应用脚手架的方法

Dec 24 Javascript

简单了解vue.js数组的常用操作

Jun 17 Javascript

Vue中computed及watch区别实例解析

Aug 01 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删除HTMl标签的三种解决方法

2013/06/30 PHP

测试php函数的方法

2013/11/13 PHP

php实现通过cookie换肤的方法

2015/07/13 PHP

PHP文件类型检查及fileinfo模块安装使用详解

2019/05/09 PHP

一个符号插入器中用到的js代码

2007/09/04 Javascript

JavaScript 字符串乘法

2009/08/20 Javascript

JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

2013/01/23 Javascript

JS文本框不能输入空格验证方法

2013/03/19 Javascript

JQuery for与each性能比较分析

2013/05/14 Javascript

非常漂亮的JS+CSS图片幻灯切换特效

2013/11/20 Javascript

详细介绍jQuery.outerWidth() 函数具体用法

2015/07/20 Javascript

js表单验证实例讲解

2016/03/31 Javascript

一览画面点击复选框后获取多个id值的方法

2016/05/30 Javascript

jquery实现界面无刷新加载登陆注册

2016/07/30 Javascript

Vue实现双向绑定的方法

2016/12/22 Javascript

基于JavaScript实现的顺序查找算法示例

2017/04/14 Javascript

AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

2017/10/24 Javascript

vue.js $refs和$emit 父子组件交互的方法

2017/12/20 Javascript

Vue实现图片轮播组件思路及实例解析

2020/05/11 Javascript

[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/18 DOTA

Python实现发送与接收邮件的方法详解

2018/03/28 Python

Python简单实现的代理服务器端口映射功能示例

2018/04/08 Python

tensorflow实现加载mnist数据集

2018/09/08 Python

Python 异常处理Ⅳ过程图解

2019/10/18 Python

浅谈keras2 predict和fit_generator的坑

2020/06/17 Python

python os模块在系统管理中的应用

2020/06/22 Python

Needle & Thread官网：英国仙女品牌

2018/01/13 全球购物

马来西亚领先的在线礼品店：Giftr

2018/08/23 全球购物

教学器材管理制度

2014/01/26 职场文书

态度决定一切演讲稿

2014/05/20 职场文书

抗震救灾标语

2014/06/26 职场文书

2014年教师节座谈会发言稿

2014/09/10 职场文书

行政秘书工作自我鉴定

2014/09/15 职场文书

党员干部反四风民主生活会对照检查材料思想汇报

2014/10/12 职场文书

简历自荐信范文

2015/03/09 职场文书

2016年“11.11”光棍节活动总结

2016/04/05 职场文书