有谁知道可以做这样的事情的 jQuery 插件：http://www.pronovias.com/答案

【问题标题】：Does anybody know of a jQuery plugin that can do something like this: http://www.pronovias.com/有谁知道可以做这样的事情的 jQuery 插件：http://www.pronovias.com/
【发布时间】：2010-08-01 10:38:31
【问题描述】：

有没有人知道可以执行以下操作的 jQuery 插件：http://www.pronovias.com/

我的意思是当我在滑动图片时将鼠标悬停在它上面。我想放大和缩小。如果不存在这样的插件，我该怎么写？

这就是我所做的。任何人都可以用 ie support 替换为正确的吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var currentPhoto=$('#photoShow .current');
        var nextPhoto=currentPhoto.next('div').addClass('next');
        if (nextPhoto.length==0)
            nextPhoto=$('#photoShow div:first').addClass('next');
        $('#photoShow .current').animate({'opacity':0},1000, function(){
        nextPhoto.addClass('current');
        nextPhoto.removeClass('next');
        currentPhoto.css('opacity', 1)
        currentPhoto.removeClass('current');
        });
    },2000);
    $('#photoShow img').hover(
        function(){
            $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'});
            }, 
        function(){
            $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'});

            });

});


</script>


<style type="text/css">
<!--
*{margin:0; padding:0;}
img{ border:none;
cursor:pointer;}



#photoShow div{
    position:relative;
    visibility:hidden;
}
#photoShow img{
position:absolute;
    z-index: 0;

}
#photoShow .current {
    z-index: 2;
    visibility:visible;
}
#photoShow .next {
    z-index: 1;
        visibility:visible;
}


-->
</style>
</head>

<body>
<div id="photoShow">
    <div class="current"><img src="gelinlik1.jpg" /></div>
    <div><img src="gelinlik2.jpg" /></div>
    <div><img src="gelinlik3.jpg" /></div>
    <div><img src="gelinlik4.jpg" /></div>
        <a href="#" style="visibility:hidden;"></a>
    </div>

</body>
</html>

【问题讨论】：

该网站使用 Flash。在 jQuery 中以一种适用于您需要支持的所有浏览器的方式执行此操作可能是不可能的。
不，我写了一些jQuery代码真的很接近，但效果不完全。

标签： jquery image slider zooming

【解决方案1】：

当然可以做到这一点，而且我确信我已经看到有人已经为它编写了一个插件，但我似乎不记得它在哪里。

为了让您开始使用插件路线，您需要决定插件应该做什么，然后，选项应该是什么。

到目前为止，我们知道插件需要 -

放大鼠标输入
它应该放大多少？
图像是否应该在整个缩放过程中保持居中？
图像应该以什么速度缩放？
鼠标离开时缩小
使用与放大相同的速度设置。
应该会恢复到原始图像大小。

考虑到这些，您需要考虑的事情。

如果我们只是增加图像的宽度和高度，则视口中的宽度和高度会增加，但我们真正想要做的是将宽度和高度限制为页面加载时的值并让图像变为在这些范围内更大。我们该怎么做？
当我们缩放时，我们是否应该将缩放后的图像文件的源换成更高分辨率版本的图像？我们可能不需要为小缩放执行此操作，例如 10 - 20%，但可能希望为较大的缩放百分比执行此操作。

一些代码可以帮助您入门。在这个页面上运行它并观察图像会发生什么

var imgs = $('img');
imgs.wrap('<div style="overflow:hidden;"></div>');

imgs.parent('div').each(function() {
  var self = $(this),
      img = self.find('img');
  self.height(img.height());
  self.width(img.width());
});

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);

【讨论】：