鼠标经过隐藏图片显示文字

鼠标经过隐藏图片显示文字

 

演示

 

 

JavaScript Code

<script>

$(document).ready(function() {
    //if mouse over and mouse out
    $('.eff').hover(
    function () {

        value = $(this).find('img').outerHeight() * -1;

        //for left/right if you have different width and height,
        //commented out because we are using up/down in this example
        //value = $(this).find('img').outerWidth() * -1);

        //animate the image
        // you can change the sliding direction by changing bottom to left, right or top
        // if you changed this, you will have to change the position of the hover out as well
        $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});

    },
    function () {

        //reset the image
        // the position property (bottom), it must be same with the on in the mouseover
        $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});

    });

    //if user clicked on the thumbnail
    $('.eff').click(function () {
        //grab and execute the first link in the thumbnail
        window.location = $(this).find('a:first').attr('href');
    });

});

</script>

 

XML/HTML Code

<div class="eff">
    <img src="1.gif" alt="Test 1" title="" width="126" height="126" />
    <div class="caption"><a href="http://www.freejs.net" class="header">www.freejs.net</a></div>
</div>

<div class="eff">
    <img src="2.gif" alt="Test 1" title="" width="126" height="126" />
    <div class="caption"><a href="http://www.freejs.net" class="header">Umbrella</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
</div>

<div class="eff">
    <img src="3.gif" alt="Test 1" title="" width="126" height="126" />
    <div class="caption"><a href="http://www.freejs.net" class="header">Maximum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
</div>

<div class="clear"></div>

 

原文地址:http://www.freejs.net/article_jquerywenzi_107.html