JavaScript--鼠标滚动改变图片大小

鼠标滚动改变图片的大小：

原理：当鼠标滚动时改变了zoom的值；

<!DOCTYPE HTML>
<html>
<head>
<title>通过鼠标滚轮放大缩小图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {
            
            height: 200px;
            background: pink;
            text-align: center;
        }
        img {
             margin: 0 auto;         
        }

</style>
</head>
<script language="javascript">
function bigimg(obj) {
    //obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
    var zoom = parseInt(obj.style.zoom)||100;
    //每次滚动鼠标时，改变zoom的大小
    //event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
    zoom += event.wheelDelta/12;//每次滚动加减10；
    if (zoom > 0) {
        obj.style.zoom = zoom+"%";//更改后的zoom赋值给obj
        console.log(obj.style.zoom);
    }
    return false;
    
}
</script>
<body>
<div>
    <img src = "images/6.jpg" width="500px" heigth="450px" onmousewheel="bigimg(this)">
</div>
</body>
</html>

　　

posted @ 2017-05-23 09:50  Ayinger  阅读(1952)  评论(0)  编辑  收藏  举报