js鼠標移上去當前放大圖片突出顯示特效代碼

比較適合產品圖片列表頁面的js特效，鼠標移上去時放大當前圖片超出的小圖片所佔的位置時疊加在其餘圖片上，經過css的position: relative與z-index樣式就能夠方便的實現這個功能。在本實例中經過了一張透明圓角的png圖片疊加在圖片上這樣就實現圖片的圓角效果了，雖然不是真正上的圓角，也是一種解決圖片圓角效果的好辦法。

 

下面來看看主要的CSS樣式：

.teebox{
			overflow: hidden; /*Prevents excess of image from showing*/
			position: relative;
	    	margin: 0 10px;
			width: 144px; /*Width and height define thumbnail size*/
			height: 183px;
			float: left;
			clear: right;
			z-index: 0;
		}
		.selected{
			overflow: visible; /*Display part of image that not currently visible*/
			z-index: 10;
		}
		
		.teebox img {
			left:-84px; /*Use this number to center your image when not hovered*/
			position: absolute;
		}
		.teebox a{ /*Area that changes to selected class when hovered over*/
			display:block;
			position: relative;
			float: left;
			left: 84px; /*Use to line up the overlay image*/
			z-index: 1;
		}
		.caption{
			color: #2FB5FF;
			font:14px Arial;
			position: relative;
			float: left;
			left: 0px;
			top: 146px;
			padding: 10px;
			background: #222;
			z-index: 1;
		}

teebox每一個產品的樣式，selected:爲當前鼠標移上去時的樣式，caption:設置價格的樣式。

js代碼說明：

$(document).ready(function() {  
			$(".teebox a").mouseover(function(){
				$(this).parent().addClass("selected");
				$(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
				$(this).parent().find('.caption').hide(); //Hides Caption
			}).mouseout(function(){
				$(this).parent().removeClass("selected");
				$(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
				$(this).parent().find('.caption').show(); //Shows Caption
			});
		});

moseover鼠標移上去時teebox添加selected樣式，隱藏那種透明PNG圖片與caption價格內容，離開剛纔相反的操做。