javascript 实现的完全兼容鼠标滚轴缩放图片的代码
发布时间:2024-04-10 16:09:43
标签:鼠标滚轴,缩放图片
code如下:
/*!
*author:sohighthesky
*blog:http://www.cnblogs.com/sohighthesky
*date:2010-2-4
*/
var zooming=function(e){
e=window.event ||e;
var o=this,data=e.wheelDelta || e.detail*40,zoom,size;
if(!+'\v1'){
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom > zooming.min)
o.style.zoom = zoom + '%';
}else {
size=o.getAttribute("_zoomsize").split(",");
zoom=parseInt(o.getAttribute("_zoom")) ||100;
zoom+=data/12;
if(zoom>zooming.min){
o.setAttribute("_zoom",zoom);
o.style.width=size[0]*zoom/100+"px";
o.style.height=size[1]*zoom/100+"px";
}
}
};
zooming.add=function(obj,min){//第一个参数指定可以缩放的图片,min指定最小缩放的大小 ,default to 50
zooming.min=min || 50;
obj.onmousewheel=zooming;
if(/a/[-1]=='a')//if Firefox
obj.addEventListener("DOMMouseScroll",zooming,false);
if(-[1,]){//if not IE
obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
}
};
window.onload=function(){//放在onload中,否则非ie中会无法计算图片大小出错
zooming.add(document.getElementById("testimg1"));
}
演示代码
<!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> <title>鼠标滚动缩放图片</title> <meta name="author" content="sohighthesky"/> <meta name="Keywords" content="鼠标滚动缩放图片,兼容IE,FF,Chrome,Safari,Opera"> <style type="text/css"> /* pre style*/ body,th,td {font-size:12px;font-family:Verdana,Tahoma,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif;} body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p {margin:0;padding:0;} li { list-style-type:none;} a {color:#3366CC; text-decoration:none;} a:hover {color:#FF6600;text-decoration:underline;} /************************************************************/ #div1 {width:300px;margin:100px 35%;line-height:22px;} </style> </head> <body> <div id="div1"> <img src="/upload/2010-2/20100204144849603.jpg" id="testimg1" alt="sohighthesky"/> <div>默认最小缩放为原图片的50%</div> <div>脚本之家</div> </div> </body> <script type="text/javascript"> (function(){ /*! *Author:sohighthesky *blog:http://www.cnblogs.com/sohighthesky *date:2010-2-4 */ var zooming=function(e){ e=window.event ||e; var o=this,data=e.wheelDelta || e.detail*40,zoom,size; if(!+'\v1'){//IE zoom = parseInt(o.style.zoom) || 100; zoom += data / 12; if(zoom > zooming.min) o.style.zoom = zoom + '%'; }else { size=o.getAttribute("_zoomsize").split(","); zoom=parseInt(o.getAttribute("_zoom")) ||100; zoom+=data/12; if(zoom>zooming.min){ o.setAttribute("_zoom",zoom); o.style.width=size[0]*zoom/100+"px"; o.style.height=size[1]*zoom/100+"px"; } } }; zooming.add=function(obj,min){//第一个参数指定可以缩放的图片,min指定最小缩放的大小 ,default to 50 zooming.min=min || 50; obj.onmousewheel=zooming; if(/a/[-1]=='a')//if Firefox obj.addEventListener("DOMMouseScroll",zooming,false); if(-[1,]){//if not IE obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight); } }; window.onload=function(){//放在onload中,否则非ie中会无法计算图片大小出错 zooming.add(document.getElementById("testimg1")); } })() </script> </html>
ps:因为这个页面有滚动条,所以如果直接放在页面中时,会滚动页面而不是图片,不知道有什么解决办法
0
投稿
猜你喜欢
- 前言MySQL提供了众多功能强大、方便易用的函数。使用这些函数可以极大地提高用户对数据库的管理效率。MySQL中的函数包括数学函数、字符串函
- MySQL安装与配置1、所用MySQL的版本为:MySQL_5_1_26.msi;2、下载好软件后双击进入以下界面: 3、点击Ne
- 设置密码保护SqlServer数据库备份文件! 备份SqlServer数据库 Backup Database [数据库] To disk=&
- declare @tt varchar(20) set @tt = 'monisubbouns' declare @int
- 一、算术运算符主要用于数学运算,其可以连接运算符前后的两个数值或表达式,对数值或表达式进行加 (+)、减(-)、乘(*)、除(/)和取模(%
- 我们做登录的时候经常会使用到,验证手机号是否正确、向手机发送验证码倒计时60s的问题,我们改如何解决呢?让我们一起来探讨一下吧。如下图:首先
- pandas.DataFrame为每一列保存一个数据类型dtype。要仅提取(选择)特定数据类型为dtype的列,请使用pandas.Dat
- 正常来说backward( )函数是要传入参数的,一直没弄明白backward需要传入的参数具体含义,但是没关系,生命在与折腾,咱们来折腾一
- 在改进SQL Server 7.0系列所实现的安全机制的过程中,Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQ
- 大家都是用的哪一款远程控制工具呢?向日葵确实还可以,支持多平台、跨网络,但是必须要注册 Oray账号才行。虽然与免费版,但是用过的都知道,还
- 如下所示:function makeAcquire($nUsers,$nAwards) { &
- 最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况。具体原因可以上网查询,在这里将记录下解
- 功能是从客户端向服务发送一个字符串, 服务器收到后将字符串重新发送给客户端,同时,在连接建立之后,服务器可以向客户端发送任意多的字符串客户端
- ASP的强大不仅仅局限于接受和显示的交互,更多的是运用ActiveX 组件进行更强大的Web应用。那究竟ActiveX组件为何物?
- 简介想写一个登录注册的demo,但是以前的demo数据都写在程序里面,每一关掉程序数据就没保存住。。于是想着写到配置文件里好了Python自
- 相信许多小伙伴都玩过数字 * 游戏,就是指在一定数字范围(一般是整数,不包含边界)里,一个玩家选中一个数字当作 * ,其余玩家在这个范围猜数字,
- 前言本人做SSM项目的时候,在做删除功能时,发现找不到字段,在搜索了各种博客之后终于找到了解决办法一、报错Unknown column &a
- 操作系统:macOS High Sierra 10.13.3Python3.6因为此版本自带python2.7,就下载并安装了anacond
- <htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
- <!--#include file="conn/conn.asp"--> <% set Newslis