Jquery эффект наведения, щелчка и оттенков серого с вкладкой и надписью - PullRequest
Новая
       9

Jquery эффект наведения, щелчка и оттенков серого с вкладкой и надписью

1 голос
/ 04 марта 2012

Я хочу, чтобы мое изображение стало черно-белым (оттенки серого), после того, как я наведу на него курсор, он изменит цвет.это уже успешно, но я хочу, чтобы, если я нажму на изображение, они поменяют цвет и отобразят содержимое в 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>

если это так сложно, вы можете использовать 2 изображения в градациях серого и в цвете

1 Ответ

0 голосов
/ 04 марта 2012

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();
        });
    });

добавить css: 

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

удалить css: 

.item img {opacity:0;}

Я не могу понять, что не так, но это, кажется, работает, как выожидать

...