zoukankan      html  css  js  c++  java
  • 鼠标滚轮实现图片的缩放-------Day79

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

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


    功能介绍:

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


    功能拆解分析:

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

    2、随着事件发生的不同。图片不断添加或者降低。


    实例分析:

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

    <style type="text/css">
    * { margin:0; padding:0; }
    body { 100%; height:100%; overflow:auto; }
    #img { display:block; 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不同的方法,还有一方面是传递的參数,这个是比較easy出现故障的地方

    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、剩余的逻辑就不说了,已经写的非常easy明了了

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


  • 相关阅读:
    基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据
    NIO编程中buffer对象的理解以及API的使用
    使用简单工厂模式写一个简单的计算器!!!
    java数字转字符串前面自动补0或者其他数字
    jQuery Validate自定义金钱验证,是否为金额格式,保留两位小数,并支持千分制货币格式
    javade多任务处理之Executors框架(线程池)实现的内置几种方式与两种基本自定义方式
    【转】asp.net mvc webapi+angular.js案例
    【转】MVC5中的区域(Areas)
    【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
    scroll pagination.js数据重复加载、分页问题
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6809463.html
Copyright © 2011-2022 走看看