js鼠标移上去当前放大图片突出显示特效代码

2019独角兽企业重金招聘Python工程师标准>>>

比较适合产品图片列表页面的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价格内容，离开刚才相反的操作。

转载于:https://my.oschina.net/u/1415286/blog/181079