js-图片的放大和缩小 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <img src="imgA_1.jpg" id="img" alt=""/>
 9 </body>
10 </html>
11 <script>
12     function myBrowser() {
13         var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
14         var isOpera = userAgent.indexOf("Opera") > -1;
15         //判断是否Opera浏览器
16         if(isOpera) {
17             return "Opera";
18         }
19         //判断是否Firefox浏览器
20         if(userAgent.indexOf("Firefox") > -1) {
21             return "FF";
22         }
23         if(userAgent.indexOf("Chrome") > -1) {
24             return "Chrome";
25         }
26         if(userAgent.indexOf("Safari") > -1) {
27             return "Safari";
28         }
29         if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
30             return "IE";
31         }
32     }
33 
34 
35     var i = document.getElementById("img");
36     if(myBrowser()=="ff"){
37         i.addEventListener("DOMMouseScroll",fun,false);
38     }else{
39         i.onmousewheel=fun;
40     }
41 
42     function fun(e){
43         var ev=e||window.event;
44         var num=ev.wheelDelta||ev.detail; 
45         if (num>0){  //正数表示滚轮向上,负数表示滚轮向下
46             i.style.width=i.offsetWidth*1.2+"px";
47         }else{
48             i.style.width=i.offsetWidth*0.8+"px";
49         }
50     }
51     
52 </script>

 

posted @ 2015-09-27 21:51  -Amy-  阅读(509)  评论(0)    收藏  举报