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:因为这个页面有滚动条,所以如果直接放在页面中时,会滚动页面而不是图片,不知道有什么解决办法
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 如果你还在为python的各种urllib和urlibs,cookielib 头疼,或者还还在为python模拟登录和抓取数据而抓狂,那么来
- 目录1、mysqldump执行过程:特点2、导出 CSV 文件(最灵活)执行过程特点3、物理拷贝(最快)过程局限总结1、mysqldump执
- 一、问题描述在windows下,time.Parse()的时区和time.Format()的时区是一致的。但是在linux环境下,time.
- 第一步——安装MySQL 到http://dev.mysql.com/downloads/ 下载这个服务器、MySQL GUI工具和MySQ
- 优化糟糕设计的表结果或者索引能很大程度改进mysql的性能。 如果需要高性能, 那么就需要根据不同的操作需求精心设计表结构和索引, 这当然需
- 前言本文总结了mysql中DCL,常用的一些权限控制,后续使用到其他会继续补充。一、用户控制管理创建用户create user '用
- 一、python判断文件和文件夹是否存在、创建文件夹 >>> import os>>> os.
- 被分割的字段一定是有限而且数量较少的,我们不可能在一个字符串中存储无限多个字符 这个字段所属的表与这个字段关联的表,一定是一对多的关系 比如
- 首先我们载入一张灰度图片,一般灰度图片像素为0-255.可以发现该图片的最大像素为254,最小像素为2。一般处理图片时会转化为double类
- 在官网下载源码包:https://www.php.net/downloads.php步骤:1、解压命令:tar -xjvf php.tar.
- 【pytorch官方文档】:https://pytorch.org/docs/stable/generated/torch.nn.AvgPo
- 作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇
- 把下面SQL里的SELECT单独执行,没有问题,但是用来CREATE VIEW 就报错了.CREATE OR REPLA
- 本文实例讲述了Python异常模块traceback用法。分享给大家供大家参考,具体如下:traceback模块被用来跟踪异常返回信息. 如
- Python是目前最流行的语言之一,它在数据科学、机器学习、web开发、脚本编写、自动化方面被许多人广泛使用。它的简单和易用性造就了它如此流
- 天在刷题的时候用到了正则,用的过程中就感觉有点不太熟练了,很久没有用正则都有点忘了。所以现在呢,我们就一起来review一下python中正
- 相信很多人在使用正则表达式的时候都会遇到如下的语句:通过查阅正则表达式的API文档可以了解到正则表达式的语法知识:很多小伙伴就会产生疑问为什
- 1、修改本地化时间原理: 本地化时间格式化需要gettext支持, 假如你的环境没有开启此功能, 将会返回乱码, 影响#phpmyadmin
- 本文实例讲述了Symfony2实现在controller中获取url的方法。分享给大家供大家参考,具体如下:// 假设当前URL地址是htt
- 我曾以为,写脚本是很难的,直到我遇到了Python前言随着国内版权意识的跟进,很多影视音乐资源开始收费,而且度盘又经常随意封杀各种资源,所以