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价格内容，离开刚才相反的操做。