Question

我对编程比较陌生，我正在尝试组建一个画廊。对于导航，我希望得到一些帮助，将灰度效果应用于动态加载的拇指。

我可以在没有动态加载时使用它（v1）;所有拇指都显示为灰色并在翻转时淡出颜色），但不是动态图像拇指（v2）......

我很感激任何帮助。感谢

v1 :(非动态拇指）

html :(按预期工作）所有拇指都是灰度，并在悬停时淡出颜色

.....
<div class="sub_nav_wrapper">
    <ul class="sub_nav thumbs">
        <articlep>
            <li class="module variable">
                <img alt="" src="projects/thumbs/print/01.jpg">
                <span class="tn_viewbttn tn_dbttn">view</span>
            </li>
        </articlep>
    </ul>
</div>
.....

var mainDD = function(el){  
var t = this;  
t.$el = $(el);  
t.tdcs = [];  
t.lis = t。$ el.find（'articlep'）。children（'li'）;
      t.lis.each（函数（）{
          t.tdcs.push（new mainDDComponent（this））;
      }）;

v2：动态

以下是动态大拇指的html：

<div class="sub_nav_wrapper">  
    <ul class="sub_nav thumbs">  
        <section id="projectsp">  
            <div class="content">  
            /*                              
            //*dynamically loaded content - thumbs  

            //----  
            //articlep  = ' <articlep>'
            //+ ' <li class="module variable">'
            //+ '   <img src="projects/thumbs/print/'+picturep+'" alt=""/>'
            //+ '   <span class="tn_viewbttn tn_dbttn">view</span>'
            //+ '   </li>'
            //+ ' </articlep>';
            //----
            */
            </div>
        </section>
    </ul>
</div>

所有拇指都显示为彩色，并且只能在鼠标悬停时单独切换为灰度。

$('#projectsp').on('mouseover','articlep>li', function(){
    t.tdcs.push(new mainDDComponent(this));
});

Answer 1

继续brillout.com's answer以及Roman Nurik's answer之后，稍微放宽了“无SVG”的要求，您只需使用一个SVG文件和一些CSS即可在Firefox中对图像进行去饱和处理。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

了解更多信息，请参阅this问题

如何将灰度脚本应用于动态加载的图像？

1 个答案: