首页 > 其他 > 详细

鼠标滚轮实现图片的缩放-------Day79

时间:2014-08-01 02:29:21      阅读:343      评论:0      收藏:0      [点我收藏+]

今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了,一则工作确实紧了些,再则没能处理好生活、工作和学习的节奏,这才是人生最大的课题吧,不过也还好,至少自己还在坚持着,其实真的越来越感觉到自己的不足,可昂扬的斗志却是越来越低沉的迹象,内心里总有个声音在蛊惑自己:别整那些刻意的东西,做给谁看啊,而且刻意的记录的时间完全可以拿来学更多的东西,可最终我还在这个蛊惑前坚持着:确实可以腾出更多的时间来,也没人会在意在做什么,可是,同样,我不需要走那么快,而且只要知道自己在意就好了,我需要的就是这样一步一步走下去,这条路,才刚刚开始。

“滚轮滑动操作图片缩放”这个功能是我在网上无意中发现的,实际在想的过程中没有想到它的实用点在哪,不过还觉得蛮酷的就学习了下,这里也来记录下:


功能介绍:

将鼠标放在图片上,滚轮向上滑动,则图片不断变大,滚轮向下滑动,则图片不断减小


功能拆解分析:

1、第一个要关注的,就是获取滚轮事件的监听,能够获取到滚轮是在上滑还是下滑;

2、随着事件发生的不同,图片不断增加或者减少;


实例分析:

<img id="img" src="run.gif" alt="跑" />
这样我们先在html中放置一个图片,并对它进行样式上的设置

<style type="text/css">
* { margin:0; padding:0; }
body { width:100%; height:100%; overflow:auto; }
#img { display:block; width:20%; margin:20px auto; cursor:-webkit-zoom-in; cursor:-moz-zoom-in; border:4px solid #ccc; border-radius:4px; }
</style>
给图片加边框,是为了更好的观察增大减小的幅度,再有个比较经典的地方就是cursor,这个应该有很多种样式,合理的这个应用会加分很多啊,然后我们来实现功能

window.onload = function(){
		var img = document.getElementById("img");
		if(img.addEventListener){
			//ie9,chrome,safari,opera
			img.addEventListener("mousewheel",change,true);
			//firefox
			img.addEventListener("DOMMouseScroll",change,false);
		}
		else{
			//ie 6/7/8
			img.attachEvent("onmousewheel",change);
		}
首先就是加监听,前面在记录中曾经提到过,一方面是兼容性中的addEventListener和attachEvent不同的方法,另一方面是传递的参数,这个是比较容易出现问题的地方

1、首先在第一个参数中addEventListener中是单纯的事件名称,像mousewheel,而attachEvent中的第一个参数则是事件,像onmousewheel;

2、addEventListener中存在三个参数,第三个是个boolean值,而且必须写,false表示支持浏览器事件的冒泡功能(由里向外),true则表示浏览器事件的捕获功能(由外向里)【这个地方还没有理解透,啥不同呢,回头再分析吧】

3、兼容性,当时的楼主很全面的兼容了五大浏览器,让我这后来人占了好大便宜,赚到了

监听实现了之后,我们就要根据不同的事件作出不同的回应,这个就该写在我们的方法change()中了

function change(e){
			var e = window.event||e;
			var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.detail)));//wheelDelta和detail
			img.style.width = Math.max(50, Math.min(800,img.width + (30*oper)))+"px";
			return false;
		}
这个方法中,首先学到的是Math.max()和Math.min()两个方法,然后就是逻辑和兼容了

1、Math.max(a,b,c,d)参数可以取多个,取若干值中最大值,当然min就是对应的取最小值嘛;

2、e.wheelDelta||-e.detail,这个又是兼容性的表现了,貌似只有Firefox中使用detail,其他的都是wheelDelta,两者的意义都一样的,都有两个值,但是两个值是不同的detail只能取+/- 3,而wheelDelta则只能取+/- 120,但同样的是整数表示向上,负数表示向下;

3、剩余的逻辑就不说了,已经写的很简单明了了

时间又不早了,赶在月末发了这篇吧,准备迎接崭新的八月...

bubuko.com,布布扣

鼠标滚轮实现图片的缩放-------Day79,布布扣,bubuko.com

鼠标滚轮实现图片的缩放-------Day79

原文:http://blog.csdn.net/marsmile_tbo/article/details/38326297

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!