鼠标滚动轮子来放大和缩小图片:
<!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>