jquery - 悬停时图像放大，div 框中的内容附加到图像

Question

我想知道是否有人可以指导我构建一个脚本，我可以通过将鼠标悬停在上面来放大图像，但图像不仅会被放大，图像周围的 div 也会附加到当您将鼠标悬停时出现的它

谢谢!

Answer 1

最简单的方法。将代码放在 ressizeds.js 文件中的某个位置。

/**
 * Copyright 2012, Val Kotlarov Hoffman.
 * Licensed under the GPL Version 2 license.
 * You may copy freely and distribute as long as this comment remains.
 **/

$(document).ready(function(){ 
    init_resizeables();
});

function init_resizeables() {

    $('img').hover(
        function() { 
            $(this).stop().animate({
                'width':'444px'
            },{
                duration:234
            }).css({
                'z-index':'999', 
                'position':'absolute'
            });
        },
        function() { 
            $(this).stop().animate({
                'width':'254px'
            },{
                duration:345
            }).css({
                'z-index':'1'
            });
        });
}

第一个是缩放图像的宽度。第二个宽度是图像的正常尺寸。只需将其包含在您的 html 文件中即可。将 img 选择器更改为您需要的任何内容。享受吧。