前端页面，90°翻转图片、滚动鼠标滑轮放大缩小图片-CSDN博客

话不多说，直接上代码：

#set($_title = "查看司机照片")
#parse("common/_header.vm")
<style>
    .img{
        overflow-y: auto;
        overflow-x: auto;
    }
</style>
</head>
<body class="img">
<img id="target"  src="$!{url}"  onmousewheel="return bigimg(this)" style="cursor:pointer">
<script>
    window.onload = function(){
        var current = 0;
        document.getElementById('target').onclick = function(){
            current = (current+90)%360;
            this.style.transform = 'rotate('+current+'deg)';
        }
    };
    function bigimg(obj){
        var zoom = parseInt(obj.style.zoom,10)||100;
        zoom += event.wheelDelta / 20;
        if(zoom > 0 )
            obj.style.zoom=zoom+'%';
        return false;
    }
</script>
</body>
</html>



代码解析：

其中 onmousewheel="return bigimg(this)"  控制鼠标滑轮的滚动事件。（其中放大缩小比例可以通过修改  zoom += event.wheelDelta / 20;  后面的分母，分母越小，滚动一次缩放比例越大）

下面这段代码控制点击翻转图片90°。

window.onload = function(){
    var current = 0;
    document.getElementById('target').onclick = function(){
        current = (current+90)%360;
        this.style.transform = 'rotate('+current+'deg)';
    }
};

转载于:https://www.cnblogs.com/dk1024/p/10278166.html