悬停时图像放大，div框内的内容附加到图像 [英] image enlarge on hover with content inside div box attached to image

问题描述

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

I was wondering if someone can guide me towards building a script where I can enlarge the image by hovering over with my mouse, but the image isn't only going to be enlarged, a div around the image will also be attached to it that appears when you hover

谢谢！

推荐答案

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

Easiest way. Put the code somewhere in your resizables.js file.

/**
 * 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 选择器更改为您需要的任何内容.享受吧.

The first with is the width of the zoomed image. The second width is image's normal size. Simply include this in your html file and you're done. Change the img selector to whatever you need. Enjoy.

这篇关于悬停时图像放大，div框内的内容附加到图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！