悬停时图像放大,图像附加div框内的内容

时间:2011-07-09 03:32:02

标签: jquery image hover mouseover image-enlarge

我想知道是否有人可以指导我制作一个脚本,我可以通过鼠标悬停来放大图像,但图像不仅会被放大,图像周围的div也会被附加到它是你悬停时出现的

谢谢!

1 个答案:

答案 0 :(得分:4)

最简单的方法。将代码放在resizables.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 选择器更改为您需要的任何内容。 享受。