JavaScript捕获滚轮事件,获取鼠标滚轮值放大缩小图片

SongKer 发布时间:2017-08-10 分类:Web 阅读:6203次 1 条评论

JavaScript捕获滚轮事件,获取鼠标滚轮值放大缩小图片
<script type="text/javascript">
function zoomimg(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta > 0) {
        console.log('放大图片的操作');
        var width = top.$('img[onmousewheel]').width();
        top.$('img[onmousewheel]').width(width*1.1)
    } else if (delta < 0) {
        console.log('缩小图片的操作');
        var width = top.$('img[onmousewheel]').width();
        if (width > 400) {
            top.$('img[onmousewheel]').width(width * 0.9);
        }
    }
}
 
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', zoomimg, false);
window.onmousewheel = document.onmousewheel = zoomimg;
</script>

html使用:

<img src="http://songker.com/" style="max-width:90%;" onmousewheel="return zoomimg(this)" >


关键字词: jQuery

已有1条留言

发表评论:

◎欢迎您的参与讨论。