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

javascript void(0)的妙用

Oct 21 Javascript

javascript实现的登陆遮罩效果汇总

Nov 09 Javascript

jquery ajax双击div可直接修改div中的内容

Mar 04 Javascript

基于JQuery打造无缝滚动新闻步骤详解

Mar 31 Javascript

基于JQuery实现分隔条的功能

Jun 17 Javascript

JavaScript从0开始构思表情插件

Jul 26 Javascript

Canvas实现动态的雪花效果

Feb 13 Javascript

JavaScript实现的数字与字符串转换功能示例

Aug 23 Javascript

jquery动态添加带有样式的HTML标签元素方法

Feb 24 jQuery

浅谈Vue 性能优化之深挖数组

Dec 11 Javascript

从vue源码看props的用法

Jan 09 Javascript

小程序scroll-view安卓机隐藏横向滚动条的实现详解

May 16 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

fleaphp下不确定的多条件查询的巧妙解决方法

2008/09/11 PHP

PHP如何抛出异常处理错误

2011/03/02 PHP

php使用curl获取https请求的方法

2015/02/11 PHP

json简单介绍

2008/06/10 Javascript

defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx，操作被中止”错误的解决方法

2010/04/27 Javascript

让AJAX不依赖后端接口实现方案

2012/12/03 Javascript

jquery定时滑出可最小化的底部提示层特效代码

2013/10/02 Javascript

jQuery.holdReady()使用方法

2014/05/20 Javascript

Firefox中使用outerHTML的2种解决方法

2014/06/07 Javascript

JSON字符串和对象之间的转换详解

2015/05/26 Javascript

多种js图片预加载实现方式分享

2016/02/19 Javascript

jQuery实现简单隔行变色的方法

2016/02/20 Javascript

jquery attr()设置和获取属性值实例教程

2016/09/25 Javascript

基于JavaScript实现Tab选项卡切换效果

2016/11/24 Javascript

JavaScript实现审核流程状态的动态显示进度条

2017/03/15 Javascript

详解如何使用vue-cli脚手架搭建Vue.js项目

2017/05/19 Javascript

基于VUE选择上传图片并页面显示（图片可删除）

2017/05/25 Javascript

集合Bootstrap自定义confirm提示效果

2017/09/19 Javascript

基于javascript处理二进制图片流过程详解

2020/06/08 Javascript

ant design 日期格式化的实现

2020/10/27 Javascript

Python实现对百度云的文件上传(实例讲解)

2017/10/21 Python

Win7 64位下python3.6.5安装配置图文教程

2020/10/27 Python

Python中的类与类型示例详解

2019/07/10 Python

使用python+poco+夜神模拟器进行自动化测试实例

2020/04/23 Python

NFL Game Pass欧洲：在线观看NFL比赛直播和点播，以高清质量播放

2018/08/30 全球购物

世界上第一个创建了罩杯系统的美国内衣品牌：Maidenform

2019/03/23 全球购物

ParcelABC西班牙：包裹运送和快递服务

2019/12/24 全球购物

定义一结构体数组表示分数，并求两个分数相加之和

2013/06/11 面试题

化学实验员岗位职责

2013/12/28 职场文书

战友聚会邀请函

2014/01/18 职场文书

大专毕业自我鉴定

2014/02/04 职场文书

授权委托书怎么写

2014/09/25 职场文书

商业用房租赁协议书

2014/10/13 职场文书

2015年医德医风工作总结

2015/04/02 职场文书

Django实现聊天机器人

2021/05/31 Python

教你如何使用Python开发一个钉钉群应答机器人

2021/06/21 Python