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

最新推荐文章于 2021-06-04 17:49:19 发布

acg4320

最新推荐文章于 2021-06-04 17:49:19 发布

阅读量196

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Ayinger/p/6892677.html

版权

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

原理：当鼠标滚动时改变了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>

转载于:https://www.cnblogs.com/Ayinger/p/6892677.html