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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
js实现多个标题吸顶效果
Jan 08 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python的多重继承的理解
2017/08/06 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python3 max()函数基础用法
2019/02/19 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
小学教师自我鉴定范文
2014/03/20 职场文书
企业宣传标语
2014/06/09 职场文书
租房安全协议书
2014/08/20 职场文书
保密工作承诺书
2014/08/29 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
js 实现验证码输入框示例详解
2022/09/23 Javascript