基于jquery的鼠标滚动放大缩小图片

发布时间：2023-05-17 17:12:04

在网页设计中，经常需要使用图片来增强页面效果。如果能实现图片的放大缩小效果，会更能吸引读者的眼球。基于jquery的鼠标滚动放大缩小图片，是一种常见的实现方式，本文将通过具体的代码实现来讲解如何实现这样的效果。

实现步骤：

1. 创建HTML代码段

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于jquery的鼠标滚动放大缩小图片</title>
    <style>
        #imgContainer{
            width:800px;
            height:600px;
            margin:100px auto;
            overflow:hidden;
            position:relative;
        }
        img{
            width:100%;
            height:100%;
            cursor:pointer;
            position:absolute;
            left:0;
            top:0;
            z-index:1;
        }
    </style>
</head>
<body>
    <div id="imgContainer">
        <img src="images/img1.jpg" alt="">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/imgMagnify.js"></script>
</body>
</html>

在HTML代码中，首先创建了一个div容器，并给定了相应的样式，用来包含图片。

2. 编写jQuery代码段

(function($){
    $.fn.imgMagnify = function(options){
        var defaults = {
            speed: 50,
            scale: 1.05,
            maxScale: 5,
            minScale: 0.1
        };

        var opts = $.extend(defaults,options);

        return this.each(function(){
            var $this = $(this),
                originWidth = $this.width(),
                originHeight = $this.height(),
                currentScale = 1,
                timer = null;

            $this.on('mousewheel DOMMouseScroll',function(e){
                clearTimeout(timer);
                var speed = parseInt(opts.speed),
                    originEvent = e.originalEvent,
                    delta = (originEvent.wheelDelta && (originEvent.wheelDelta > 0 ? 1 : -1)) ||
                    (originEvent.detail && (originEvent.detail > 0 ? -1 : 1));
                if(delta > 0){//向上滚动
                    currentScale = currentScale*opts.scale > opts.maxScale ? opts.maxScale : currentScale*opts.scale;
                }else{//向下滚动
                    currentScale = currentScale/opts.scale < opts.minScale ? opts.minScale : currentScale/opts.scale;
                }
                $this.width(originWidth*currentScale).height(originHeight*currentScale);
                var left = (originWidth - $this.width())/2;
                var top = (originHeight - $this.height())/2;
                $this.css({'left':left,'top':top});

                timer = setTimeout(function(){
                    currentScale = 1;
                    $this.width(originWidth).height(originHeight);
                    $this.css({'left':0,'top':0});
                },speed)
                return false;
            })
        })
    }
})(jQuery);

在jQuery代码中，获取插件的参数，主要是设置放大缩小的速度，缩小和放大的比例以及最大和最小的缩放比例。然后定义currentScale代表当前缩放比例，定时器timer来恢复原始状态。设置鼠标滚轮事件，根据滚轮滚动的方向，更新currentScale变量，并将更新后的缩放比例应用于图片，同时还要根据缩放比例调整left和top的值，以使图片居中。最后，使用定时器将图片恢复到原始状态。

3. 调用jQuery插件

$(function(){
    $('#imgContainer img').imgMagnify({
        speed: 50,
        scale: 1.05,
        maxScale: 5,
        minScale: 0.1
    });
});

在调用jQuery插件时需要给定图片所在的div容器ID，并传递相应的参数，以供插件使用。

到这里，基于jquery的鼠标滚动放大缩小图片的实现方式就介绍完了，通过上述代码，我们可以很方便地实现这个效果。