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程序设计有所帮助。

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