Question

此代码来自此处http://unstoppablerobotninja.com/entry/fluid-images

它会从页面中获取所有图像并使其变得流畅。它很有效，我相信很多人都已经知道了。

我的问题是如何通过ID或CLASS将此代码仅应用于页面上的某些图像。像这样的东西：

<img alt="" src="fluid_image.png" id="makeitfuild"/>

我不希望我的所有照片都流畅但我仍然希望将代码用于某些图像。

请帮忙，因为我不知道我需要在代码中修改什么

    var imgSizer = {
     Config : {
          imgCache : []
          ,spacer : "/path/to/your/spacer.gif"
     }
     ,collate : function(aScope) {
          var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
          if (isOldIE && document.getElementsByTagName) {
               var c = imgSizer;
               var imgCache = c.Config.imgCache;
               var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
               for (var i = 0; i < images.length; i++) {
                    images.origWidth = images.offsetWidth;
                    images.origHeight = images.offsetHeight;
                    imgCache.push(images);
                    c.ieAlpha(images);
                    images.style.width = "100%";
               }
               if (imgCache.length) {
                    c.resize(function() {
                         for (var i = 0; i < imgCache.length; i++) {
                              var ratio = (imgCache.offsetWidth / imgCache.origWidth);
                              imgCache.style.height = (imgCache.origHeight * ratio) + "px";
                         }
                    });
               }
          }
     }
     ,ieAlpha : function(img) {
          var c = imgSizer;
          if (img.oldSrc) {
               img.src = img.oldSrc;
          }
          var src = img.src;
          img.style.width = img.offsetWidth + "px";
          img.style.height = img.offsetHeight + "px";
          img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
          img.oldSrc = src;
          img.src = c.Config.spacer;
     }
     // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
     ,resize : function(func) {
          var oldonresize = window.onresize;
          if (typeof window.onresize != 'function') {
               window.onresize = func;
          } else {
               window.onresize = function() {
                    if (oldonresize) {
                         oldonresize();
                    }
                    func();
               }
          }
     }
}

Answer 1

您需要更改以下行：

var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");

通过类名获取图像的内容。有几种方法可以做到这一点：你可以使用jQuery，在这种情况下它只是变成

var images = (aScope && aScope.length) ? aScope : $("#myClassName");

或者，您可以只使用javascript（How to getElementByClass instead of GetElementById with Javascript?和How to Get Element By Class in JavaScript?快速跳到脑海中查找有关如何简单地获取元素的任何问题。

只能使某些图像流畅

1 个答案: