使用jQuery设置图像字幕

在本教程中，我们将使用jQuery一个漂亮的半透明图像标题。悬停图像的标题将被触发。我们将使用jQuery函数fadeTo（）函数来实现半透明度。它有一个非常好的效果。


HTML代码

		<!-- wrapper div -->
		<div class='wrapper'>
		    <!-- image -->
		    <img src='wolf.jpg' />
		    <!-- description div -->
		    <div class='description'>
		        <!-- description content -->
		        <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </div>
		        <!-- end description content -->
		    </div>
		      < - ！最终描述的格-  >
		</div>
		<！ - 最终包装的div  - >

CSS代码

			div.wrapper{
			    position:relative; /*重要（所以我们当前完全可以定位描述的分区*/
			}
			div.description{
			    position:absolute; /*绝对位置（这样我们当前就可以定位我们当前想要）*/
			    bottombottom:0px; / *位置将是在底部* /
			    left:0px;
			    display:none; /* hide it */
			    /* styling bellow */
			    background-color:black;
			    font-family: 'tahoma';
			    font-size:15px;
			    color:white;
			}
			div.description_content{
			    padding:10px;
			}

jQuery代码

				//We are using $(window).load here because we want to wait until the images are loaded
				$(window).load(function(){
				    //for each description div...
				    $('div.description').each(function(){
				        //...set the opacity to 0...
				        $(this).css('opacity', 0);
				        //..set width same as the image...
				        $(this).css('width', $(this).siblings('img').width());
				        //...get the parent (the wrapper) and set it's width same as the image width... '
				        $(this).parent().css('width', $(this).siblings('img').width());
				        //...set the display to block
				        $(this).css('display', 'block');
				    });

				    $('div.wrapper').hover(function(){
				        //when mouse hover over the wrapper div
				        //get it's children elements with class description '
				        //and show it using fadeTo
				        $(this).children('.description').stop().fadeTo(500, 0.7);
				    },function(){
				        //when mouse out of the wrapper div
				        //use fadeTo to hide the div
				        $(this).children('.description').stop().fadeTo(500, 0);
				    });

				});

总结

 

很简单，效果不错，不是吗？如果您有任何问题随时分享它。