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

ie下动态加态js文件的方法

Sep 13 Javascript

js Form.elements[i]的使用实例

Nov 13 Javascript

jQuery插件实现文字无缝向上滚动效果代码

Feb 25 Javascript

javascript简单实现等比例缩小图片的方法

Jul 27 Javascript

AngularJS 防止页面闪烁的方法

Mar 09 Javascript

JS中SetTimeout和SetInterval使用初探

Mar 23 Javascript

详解vue-cli之webpack3构建全面提速优化

Dec 25 Javascript

爬虫利器Puppeteer实战

Jan 09 Javascript

详解JavaScript中关于this指向的4种情况

Apr 18 Javascript

运用js实现图层拖拽的功能

May 24 Javascript

jQuery实现放大镜案例

Oct 19 jQuery

关于Javascript闭包与应用的详解

Apr 22 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

C/S和B/S两种架构区别与优缺点分析

2014/10/23 PHP

php字符串过滤与替换小结

2015/01/26 PHP

php引用和拷贝的区别知识点总结

2019/09/23 PHP

妙用Jquery的val()方法

2012/06/27 Javascript

jQuery手机浏览器中拖拽动作的艰难性分析

2015/02/04 Javascript

cookie的secure属性详解

2015/04/08 Javascript

javascript获取select值的方法分析

2015/07/02 Javascript

基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

2016/01/18 Javascript

用nodejs的实现原理和搭建服务器(动态)

2016/08/10 NodeJs

Vue.js双向绑定操作技巧(初级入门)

2016/12/27 Javascript

Node.js服务器开启Gzip压缩教程

2017/08/11 Javascript

基于Cookie常用操作以及属性介绍

2017/09/07 Javascript

深入理解ES6之数据解构的用法

2018/01/13 Javascript

JS实现多物体运动的方法详解

2018/01/23 Javascript

JS获取url参数,JS发送json格式的POST请求方法

2018/03/29 Javascript

Redux实现组合计数器的示例代码

2018/07/04 Javascript

AngularJS自定义表单验证功能实例详解

2018/08/24 Javascript

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

2019/05/31 Javascript

利用不到200行代码写一款属于你自己的js类库

2019/07/08 Javascript

vue计算属性无法监听到数组内部变化的解决方案

2019/11/06 Javascript

python用于url解码和中文解析的小脚本(python url decoder)

2013/08/11 Python

Django使用HttpResponse返回图片并显示的方法

2018/05/22 Python

Python中利用aiohttp制作异步爬虫及简单应用

2018/11/29 Python

10款最好的Python开发编辑器

2019/07/03 Python

Python操作redis和mongoDB的方法

2019/12/19 Python

基于python 凸包问题的解决

2020/04/16 Python

CSS3的calc()做响应模式布局的实现方法

2017/09/06 HTML / CSS

店长岗位职责

2013/11/21 职场文书

会计电算化专业个人的自我评价

2013/11/24 职场文书

大型活动策划方案

2014/01/12 职场文书

结婚周年感言

2014/02/24 职场文书

处级干部考察材料

2014/12/24 职场文书

大学生党员个人总结

2015/02/13 职场文书

Go 中的空白标识符下划线

2022/03/25 Golang

Python如何使用循环结构和分支结构

2022/04/13 Python

vue.js 使用原生js实现轮播图

2022/04/26 Vue.js