0

我正在使用来自 站点的 jquery 和 css3 照片库,并且我希望能够在单击时放大图像。作者已经说过有一种方法可以做到这一点,但没有明确说明如何(我不是 jquery 专家)。

我尝试创建一个单独的脚本来更改图像的宽度和高度,但我认为现有的 jquery 或 css 可能已经覆盖了它。
这只是一个测试,看看我是否可以来回改变它:

var size = false;
function enlarge(){

    if (size == false){
    document.getElementById("photo1").style.width = "100%";
    document.getElementById("photo1").style.height = "100%";
    size = true; 
    }
    else{
        document.getElementById('photo1').width = '134px';
        document.getElementById('photo1').height = '134px';
        size = false;
    }

关于我如何实现这一目标的任何想法?

4

2 回答 2

1

我想到了三种不同的方法来做你所要求的(就在我的脑海中)。

  1. 从图像的较小版本开始,当用户单击它时,它会切换到较大版本(这将具有最少的模糊量)
  2. 更改包含元素的大小。确保包含元素具有样式max-width:100%; max-height:100%;
  3. 使用CSS3 转换(2D/3D 比例)

我创建了一个 jsFiddle 来演示最后两个选项(我假设您可以轻松找出第一个选项)。

至于插件是否在劫持您的样式更改的问题,这将需要对您的特定代码进行一些调试。

例子

于 2012-06-13T23:25:14.957 回答
0

假设你$(this)从 click 函数传递函数并传递它(放大(项目)),你应该能够让它发生。你也可以在你的其他

$('img').each(function(){
    $(this).width = '134px';
    $(this).height = '134px';
});

这样您就不必担心单击另一个后调用它。我会测试它,但不确定你已经拥有什么,并且将整个东西放在 jsfiddle 中对我不起作用(加上不在家里,所以只使用 v13,所以我无法正确测试)。

于 2012-06-13T19:37:17.680 回答