利用Jquery实现百叶窗效果

最新推荐文章于 2024-05-14 12:18:41 发布

superwoman_yy

最新推荐文章于 2024-05-14 12:18:41 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： jquery html

本文链接：https://blog.csdn.net/superwoman_yy/article/details/78253251

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
					$("ul li").click(function(){
						var $index = $(this).index();
						$(".wrap .split").each(function(index,element){
							$(element).find(".img").eq($index).removeClass("hide").addClass("show").siblings(".show").removeClass("show").addClass("hide");
						})
					})
				}
					
				)
		</script>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width:1152px;
				height:648px;
				margin: 0px auto;
			}
			.wrap .split{
				width:192px;
				height:648px;
				position:relative;
				overflow: hidden;
				float: left;
			}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

superwoman_yy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用Jquery实现百叶窗效果

$(function(){ $("ul li").click(function(){ var $index = $(this).index(); $(".wrap .split").each(function(index,element){ $(element).find(".img").eq($index).removeClass("hide").
复制链接

扫一扫