Question

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

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

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

    <!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>

Answer 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);

有没有人知道jQuery插件可以做这样的事情：http：//www.pronovias.com/

1 个答案: