logo标签列表

使用jQuery点击放大图片

jquery
6

我该如何使用jQuery点击放大图片？我对此还比较陌生，感觉自己正在打转，请帮忙。 谢谢！

以下是HTML代码：

  <div class="box"> 
    <img id="image1" src="css/images/smallknife.png"> 
    <p>$50.00</p> 
  </div> 

<div id="dialog" style="display: none;"> 
  <img src="css/images/smallknife.png"> 
</div>

这是 jQuery 部分的代码：

$('#image1').click(function(){
        $("#dialog").dialog();
    });
8个回答
12
4
谢谢，我可以使用jQuery的.dialog或类似小部件来放大图像吗？ - Mosaic
1
答案几乎总是“是的”，但我没有你问题的任何上下文。为什么你还没有展示任何代码呢？ - Matt Ball
3
这里是一些基本用法。
var $img = $('img'); // finds all image tags

$img.click(function resize(e) { // bind click event to all images
  $img.css({ // resize the image
     height: '300px',
     width: '300px'
  });
});

如果您想将点击事件绑定到一个特定的图像上，请像这样为该图像和id缓存：

var $img = $('#imageID');

2
这是我在最简单的情况下使用的方法，可以通过平滑过渡来放大图像：
$(document).ready(function(){    
   $("img").click(function(){    
        $("img").animate({height: "300px"});
    });
});
1

在搜索和搜索后，我找到了一种方法，可以不使用外部JS源并且没有许可问题。将位置设置为绝对并将宽度和高度设置为100％，调整div的占用空间，就可以实现。我需要创建额外的表格才能够将图片居中，不能在div上工作。不要忘记使用z-index将div和表格放置在所有其他元素之上。干杯...

function enlargeimage(x)
  {   
      var a = document.getElementById('_enlargeimg');
      a.style.height = x + '%';
      a.style.width = x + '%';
      x++;    
      if (x < 90)
      { setTimeout("enlargeimage(\"" + x + "\")", 5);}
  }

  function reduceimage(x)
  {   
      var a = document.getElementById('_enlargeimg');
      a.style.height = x + '%';
      a.style.width = x + '%';
      x--;

      if (x > 0)
      { setTimeout("reduceimage(\"" + x + "\")", 5);}
      else
      {
          b = document.getElementById('_enlargediv');
          c = document.getElementById('_enlargetable');
          b.parentNode.removeChild(b);
          c.parentNode.removeChild(c);        
          document.body.style.overflow = 'auto';
      }
  }
      function createelements(imgfile)
      {

          var divbackground = document.createElement('div');
          divbackground.setAttribute('id', '_enlargediv');
          divbackground.style.width  = '100%';
          divbackground.style.height = '100%';
          divbackground.style.position= 'absolute';
          divbackground.style.background= '#000';
          divbackground.style.left= '0';
          divbackground.style.top= '0';
          divbackground.style.opacity= 0.7;
          divbackground.style.zIndex= '1';

          document.body.appendChild(divbackground);

          var tblbackground = document.createElement('table');
          tblbackground.setAttribute('id', '_enlargetable')
          tblbackground.style.width  = '100%';
          tblbackground.style.height = '100%';
          tblbackground.style.position= 'absolute';       
          tblbackground.style.left= '0';
          tblbackground.style.top= '0';       
          tblbackground.style.zIndex= '2';
          tblbackground.style.textAlign = 'center';
          tblbackground.style.verticalAlign = 'middle';
          tblbackground.setAttribute('onClick', 'reduceimage(90)');

          var tr = tblbackground.insertRow();
          var td = tr.insertCell();

          var nimg = document.createElement('img');
          nimg.setAttribute('src', imgfile);
          nimg.setAttribute('id', '_enlargeimg');
          nimg.style.width='0px';
          nimg.style.height='0px'
          nimg.style.borderRadius = '5px';

          td.appendChild(nimg);

          document.body.appendChild(tblbackground);
          document.body.style.overflow = 'hidden';        

          enlargeimage(0);
      }
0
这是一个不错的代码片段，可以在单击时以漂亮的缓慢动画方式在 120 像素宽和 400 像素宽之间切换图像大小。
$("img").toggle(function()
    {$(this).animate({width: "400px"}, 'slow');},
    function()
    {$(this).animate({width: "120px"}, 'slow');
});
0
0

我知道这篇文章有点老了，但是如果有其他人偶然发现它，这就是如何在jquery对话框中放大图像的方法。

$('img').on('click', function (){
    $('body').append('<div id="dialog" title="Image"><img src="' + $(this).attr('src') + '" width="300" /></div>');
    $('#dialog').dialog();
});

请确保您有可用的jquery-ui.css，否则它看起来会很奇怪。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接