风琴效果&图片放大

最新推荐文章于 2024-02-22 10:35:31 发布

初心-LIUSHOP

最新推荐文章于 2024-02-22 10:35:31 发布

阅读量348

点赞数

分类专栏： jQuery html js

本文链接：https://blog.csdn.net/qq_42817227/article/details/106783584

版权

js 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

html

13 篇文章 2 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

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倍 */
}