鼠标滚动轮子来放大和缩小图片:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <img src="/image/img/icon_new.png" id="img" alt=""/> </body> </html> <script> function myBrowser() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 if (isOpera) { return "Opera"; } //判断是否Firefox浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; } } var i = document.getElementById("img"); if (myBrowser() == "ff") { i.addEventListener("DOMMouseScroll", fun, false); } else { i.onmousewheel = fun; i.onclick = fun; } function fun(e) { var ev = e || window.event; var num = ev.wheelDelta || ev.detail; if (num > 0) { //正数表示滚轮向上,负数表示滚轮向下 i.style.width = i.offsetWidth * 1.2 + "px"; } else { i.style.width = i.offsetWidth * 0.8 + "px"; } } </script>