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 相关文章推荐
JSON无限折叠菜单编写实例
Dec 16 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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/07/15 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python实现中值滤波去噪方式
2019/12/18 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
债务纠纷代理词
2015/05/25 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server