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

问题描述

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

谢谢！

解决方案

。将代码放在resizables.js文件的某处。

  / ** 
 *版权所有2012，Val Kotlarov Hoffman。 
 *根据GPL版本2许可授权。 
 *只要评论仍然存在，您可以自由复制并分发。 
 ** / 
 
 $（document）.ready（function（）{
 init_resizeables（）; 
}）; 
 
函数init_resizeables（）{
 $ b $（'img'）。hover（
函数（）{
 $（this）.stop（） .animate（{
'width'：'444px'
}，{
 duration：234 
}）。css（{
'z-index'：' 999'，
'position'：'absolute'
}）; 
}，
 function（）{
 $（this）.stop（）。animate {
'width'：'254px'
}，{
 duration：345 
}）。css（{$ b $'z-index'：'1'
}）; 
}）; 
} 
  

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

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

Thanks!

解决方案

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'
            });
        });
}

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屋！