鼠标经过隐藏图片显示文字
![鼠标经过隐藏图片显示文字 鼠标经过隐藏图片显示文字](https://i-blog.csdnimg.cn/blog_migrate/83c3e59b2dc23f7ba9fa79b770e168ca.jpeg)
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