Question

我在主页上有一个使用此插件的图片库：

http://codecanyon.net/item/jquery-slider-zoom-inout-effect-fully-responsive/2457203

我的客户希望在较暗的图像上使用较浅的徽标，在较浅的图像上使用较暗的徽标。我对jQuery很满意，但从来没有做过这样的事情。

这是他们正在寻找的效果：

http://www.aplusi.com/

我知道在这个网站上，他们正在为身体添加一个课程（黑暗幻灯片），然后使用更具体的课程：

.dark-slide #logo {
    color: #fff;
}

让徽标从黑色变为白色。我唯一的问题是我不知道他们是如何这样做的，因为它也适用于他们的滑动功能。我已经挖掘了他们的JS，但似乎无法找到代码。

我有一些想法，比如在箭头上有一个点击处理程序来检查呈现的图像，然后添加必要的类。唯一的问题是该库具有滑动功能，jQuery没有触摸事件的事件处理程序。

我的另一个想法是有一个间隔计时器，然后在适当的时间将课程添加到必要的图像上 - 这是我没有做过的事情，也不知道从哪里开始。

我认为这应该相当容易，但我似乎无法找到一个合适的解决方案，所以我想我会问。

非常感谢任何帮助。

Answer 1

不幸的是，他们的JavaScript被混淆了，但是你正在寻找的代码就是这个（有趣的是它似乎缺少一个分号）：

var u = e.Color.getBrightness(o.getAttribute("data-top-right-color"));    
e.one(document.body).toggleClass("dark-slide", u < 35)

＆＃34;数据右上色＆＃34;是每张幻灯片上单独设置的属性。每次幻灯片更改时，包含上述代码的函数都会触发并检查 data - 属性，看是否应该添加＆＃34; dark-slide＆＃34;使徽标字体变白的类。

Answer 2

图像必须有一个活动的容器。要根据滑块中的图像prsent更改徽标，您有两个选项：

在img标记中维护一些属性，以便您可以根据属性的值进行区分。例如。 <img src='image.png' data-value='dark'>
如果您无法维护该属性，那么复杂的解决方案是编写一个算法来确定活动图像的类型使用画布

更改徽标：

var logoImg=$('#logo');
if(activeImgType=='dark')
{
    logoImg.attr('light.png');
}else{
    logoImg.attr('dark.png');
}

Answer 3

您可以使用以下代码完成此操作。它使用画布处理图像。该概念基于使用原始图像的灰度版本检测图像是暗还是亮。

这里是基于div的背景颜色的version。如果您想将图片用作背景，请参阅我的代码here。我上传了一个带有背景图片的样本。由于交叉原因问题，我无法制作小提琴或在线演示。

简单rgb背景的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dynamic text color demo using canvas</title>
</head>
<body>
    <label><b>Image with text</b></label>
    <div id="content" style="box-shadow:0px 0px 1px #000;width:200px;height:100px;background-color:#333;">
    <b style="z-index:2;position:absolute;color:black !important;">BLACK Text</b>

    <br><b style="z-index:2;position:absolute;color:white !important;">WHITE Text</b>
    <br><b style="z-index:2;position:absolute;color:rgb(127,127,127) !important;">GRAY Text</b>
    <br><b style="z-index:2;position:absolute">CORRECTED COLOR</b>  
    </div><br><br>
    <label><b>Variables</b></label>
    <div id="height">

    </div>
    <div id="width">
    </div>
    <div id="dataLength">

    </div>
    <div id="blackCount">

    </div>
    <br>
    <label><b>Canvas for grayscale</b></label><br>
    <canvas id="myCanvas" width="200px" height="100px" style="box-shadow:0px 0px 1px #000"></canvas>
      <script>

          /* ~~~~~ This function loops over various images ~~~~~ */
            var c=0;
          var color;
          function loop(){
                c++;
                document.getElementById('content').style.backgroundColor='rgb('+(c*29)%255+','+(c*29)%255+','+(c*29)%255+')';
                var imageObj = new Image();
                imageObj.onload = function() {
                drawImage(color);
           }

          color=document.getElementById('content').style.backgroundColor;
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          context.clearRect(0, 0, canvas.width, canvas.height);
          var x = 0;
          var y = 0;

          context.rect(0,0,canvas.width, canvas.height);
          context.fillStyle='rgb('+(c*29)%255+','+(c*29)%255+','+(c*29)%255+')';
          context.fill();

          /* ~~~~~ Print height and widht of image ~~~~~ */
          document.getElementById('height').innerHTML="height: "+imageObj.height;
          document.getElementById('width').innerHTML="width: "+imageObj.width;
          /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

          var imageData = context.getImageData(x, y, canvas.width, canvas.height);
          var data = imageData.data;

          /* ~~~~~ This part converts the image to grayscale ~~~~~ */
              for(var i = 0; i < data.length; i += 4) {
              var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                // red
                data[i] = brightness;
              // green
                data[i + 1] = brightness;
                // blue
              data[i + 2] = brightness;
              }
            /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            /* ~~~~~ This part counts the number of dark pixels ~~~~~ */
            var count=0;
            for(var j=0;j<data.length;j+=4){
                if(data[j]<200 && data[j+1]<200 && data[j+2]<200){
                count+=4;
            }
        }
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

        /* ~~~~~ If the number of dark pixels are 80% of total pixels, then assume image to be dark ~~~~~ */
        if(count>=(data.length*0.8)){
            document.getElementById('content').style.color="white";
        }else{
            document.getElementById('content').style.color="black";
        }
       /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

       /* ~~~~~ Print total pixel and counted dark pixels ~~~~~ */
        document.getElementById('dataLength').innerHTML ="Data length"+data.length+" Data length/2 "+(data.length/2);
        document.getElementById('blackCount').innerHTML ="Black Count"+count;
       /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

       // Draw grayscale image on cavas
        context.putImageData(imageData, x, y);

  }
  setInterval(loop,2000);

  </script>  

</body>
</html>

试图根据浅色或深色图像更改图库的徽标？

3 个答案: