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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
vue实现路由懒加载的3种方法示例
Sep 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新手上路(八)
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php实现的顺序线性表示例
2019/05/04 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
python 下载文件的几种方法汇总
2021/01/06 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
爱我中华演讲稿
2014/05/20 职场文书
入党培养人考察意见
2015/06/08 职场文书
结婚典礼主持词
2015/06/29 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
java多态注意项小结
2021/10/16 Java/Android