jQuery图像悬停，单击和带有选项卡和标题的灰度效果

Question

i want my image get black white (grayscale) after i hover they will change to the color. 我希望将鼠标悬停后图像变为黑白（灰度），它们将变为颜色。 it is already sucses, but i want if i click image they will change color, and show content in the div i already add .click .dblclick and .toogke function but always change image to the black and white here are the code 它已经成功了，但是我想如果我单击图像，它们将改变颜色，并在div中显示内容，我已经添加了.click .dblclick和.toogke函数，但始终将图像更改为黑色和白色，这是代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Tabbed Navigation</title> 

<style type="text/css"> 
    .item {
        width: auto;
        margin: 0 0 0 0;
        float: left;
    }
    .item.first {
        clear: left;
        margin-left: 0;
    }
    .item img {
        opacity:0;
    }
    .wrapper{  
        float:left; /* important */  
        position:relative; /* important(so we can absolutely position the description div */  
        margin-right: 20px
    }  
    .description{  
        position:absolute; /* absolute position (so we can position it where we want)*/  
        bottom:50px; /* position will be on bottom */   
        width:100%;  
        /* styling bellow */  
        background-color:black;  
        font-family: 'tahoma';  
        font-size:15px;  
        color:white;  
        opacity:0.6; /* transparency */  
        filter:alpha(opacity=60); /* IE transparency */  
        z-index: 9999;
    }  
    p.description_content{  
        padding:5px;  
        margin:0px;  
    }  
    .item img a:active {
        background-image: url(images/icondock.jpg);
    }


</style> 

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 

    // $(".item img").css({"display":"none");

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item img").animate({opacity:1},500);

        // clone image
        $('.item img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":this.width,"height":this.height});
                el.dequeue();
            });
            this.src = grayscale(this.src);
        });

        // Fade image

        $('.item img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, 500);
        }) 
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, 500);
        });     
    });

    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height; 
        ctx.drawImage(imgObj, 0, 0); 
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }



</script> 
</head> 
<body>     

    <div class='wrapper'>  
        <div class="item">
        <a href="#11"><img src="images/icondock.jpg" /></a>
        </div>
        <div class="description">  
            <p class="description_content">The pack, the basic The pack, the basic <a href="#tab1">More &raquo;</a>  </p>  
        </div>  
    </div>   

    <div class='wrapper'>  
        <div class="item">
        <a href="#22"><img src="images/koifish.jpg" /></a>
        </div>
        <div class="description">  
            <p class="description_content">The pack, the basic The pack, the basic <a href="#tab2">More &raquo;</a> </p>  
        </div>  
    </div>   


    <div class='wrapper'>  
        <div class="item">
        <a href="#33"><img src="images/sakura.jpg" /></a>
        </div>
        <div class="description">  
            <p class="description_content">The pack, the basic The pack, the basic <a href="#tab3">More &raquo;</a>  </p>  
        </div>  
    </div>   

</body> 
</html>

if it is so hard you can use 2 images grayscale and color 如果很难，则可以使用2张灰度和彩色图像

Answer 1

javascript: javascript：

   $(function(){
     var canv = document.createElement('canvas'),
    ctx = canv.getContext('2d');
    canv.style.cssText = "position:absolute;left:-10000px;";

    document.body.appendChild( canv );

    function getGrayScale(src, el ){
      $("<img src=\""+src+"\" />").appendTo("body").bind("load", function  (  ) {
        var w = canv.width = this.offsetWidth,
        h = canv.height = this.offsetHeight; 
        ctx.drawImage( this, 0, 0); 
        var imgPixels = ctx.getImageData(0, 0, w, h);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        $("<img class = \"img_grayscale\" src=\""+ canv.toDataURL() +"\" alt=\"\" />")
        .insertBefore(el)
        $(this).remove();
    })
    }

        $(".item img").each(function(){
            getGrayScale(this.src, $(this));
        })
        $(".item").delegate( ".img_grayscale", "mouseenter", function  (  ) {
            $(this).stop().animate({opacity:0}, 500)
        }).delegate( ".img_grayscale","mouseout", function(){
            $(this).stop().animate({opacity:1}, 500);
        }).delegate( ".img_grayscale","click", function(){
            $(this).remove();
        });
    });

add css: 添加CSS：

.img_grayscale{ position:absolute;top:0;left:0;}

remove css: 删除CSS：

.item img {opacity:0;}

i cant figure out what's wrong but this seems work as you expect 我无法弄清楚出了什么问题，但这按预期工作

jQuery图像悬停，单击和带有选项卡和标题的灰度效果

问题描述

1 个解决方案

解决方案1
0 2012-03-04 10:56:07

jQuery图像悬停，单击和带有选项卡和标题的灰度效果

问题描述

1 个解决方案

解决方案1 0 2012-03-04 10:56:07

解决方案1
0 2012-03-04 10:56:07