风琴效果&图片放大

1、风琴效果

<ul>
    <li class="active"><img src="http://www.jq22.com/img/cs/500x300-1.png"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300-2.png"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300-3.png"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300-4.png"></li>
</ul>

ul {
	width:800px;
	height:150px;
	overflow:hidden;
	list-style:none;
}
ul li {
	width:180px;
	float:left;
	height:150px;
	transition:all .3s linear;
}
ul li img {
	width:100%;
	height:150px;
}
.active {
	width:260px;
}

$('ul li').each(function() {
    var index = $(this).index();
    $(this).mouseenter(function() {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    })
})

2、图片放大

<p><img src="http://www.jq22.com/img/cs/500x500-9.png "></p>

p {
	margin:100px;
	height:200px;
	width:200px;
}
img {
	width:100%;
	transition:all 0.5s;
	cursor:pointer;
}
img:hover {
	transform:scale(1.5);
	/* 放大1.5倍 */
}