jQuery简易展板，仿国际版阿里巴巴。

最新推荐文章于 2020-11-05 04:20:23 发布

简生

最新推荐文章于 2020-11-05 04:20:23 发布

阅读量776

点赞数

分类专栏： CSS JavaScript 文章标签： jquery function div stylesheet xhtml 阿里巴巴

本文链接：https://blog.csdn.net/jiancm2001/article/details/6796583

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

本文介绍了使用jQuery创建的一个简易展板，模仿了国际版阿里巴巴的界面效果。虽然代码存在冗余和不够整洁的问题，但展示了jQuery在动态展示内容方面的应用。

摘要由CSDN通过智能技术生成

这次的jQuery代码写得有点繁琐和混乱，

而且多次出现重复代码，也懒得去修改了。

sd-style.css

#slide-down {
	width:753px;
	height:80px;
	position:absolute;
	top:100px;
	left:300px;
}

#slide-down-p1, #slide-down-p2, #slide-down-p3 {
	width:246px;
	height:70px;
	position:absolute;
	border:1px solid #ccc;
	background:#fff;
}

#slide-down-p1 {
	left:0px;
}

#slide-down-p2 {
	left:252px;
}

#slide-down-p3 {
	left:504px;
}

#slide-show {
	width:750px;
	height:200px;
	background:#fff;
	display:none;
	clear:both;
	position:absolute;
	top:70px;
	border:1px solid #999;
	z-index:1;
}

#slide-show-p1, #slide-show-p2, #slide-show-p3 {
	width:750px;
	height:190px;
	display:none;
}

#slide-show-p1 { 
	background:#fff;
}

#slide-show-p2 { 
	background:#fff
}

#slide-show-p3 { 
	background:#FFF;
}


#slide-down .add-border {
	border:1px solid #999;
	z-index:3;
}

#slide-down .remove-bottom-border {
	border-width:1px 1px 0 1px;
}

#slide-down .show-that {
	display:block;
	z-index:1;
}

#slide-down .show-that div {
	z-index:1;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<link href="sd-style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="slide-down">
    	<div id="slide-down-p1">
		</div>
        <div id="slide-down-p2">
		</div>
        <div id="slide-down-p3">
		</div>
        <div id="slide-show">
        	<div id="slide-show-p1">1
            </div>
            <div id="slide-show-p2">2
            </div>
            <div id="slide-show-p3">3
            </div>
        </div>
	</div>

<script>
	$(document).ready(function() {
		slidedown = $("#slide-down");
		slideshow = $("#slide-show");
		
		slidedown.children().slice(0,3).hover(
			function() {
				if(slideshow.css("display") == "none") {
					$(this).addClass("add-border");
				}
				if(slideshow.css("display") == "block") {
					slidedown.children().slice(0,3).removeClass();
					slideshow.children().css("display","none");
					$(this).addClass("add-border");
					$(this).addClass("remove-bottom-border");
				}
			},
			function() {
				if(slideshow.css("display") == "none") {
					$(this).removeClass("add-border");
				}
			}
		).click(function() {
			if(slideshow.css("display") == "block") {
				//$("#slide-show").removeClass("show-that");
				slideshow.slideUp(100);
				$(this).removeClass("remove-bottom-border");
			} else {
				//$("#slide-show").addClass("show-that");
				slideshow.slideDown(100);
				slideshow.children().css("display","none");
				slidedown.children().slice(0,3).removeClass("add-border");
				$(this).addClass("add-border");
				$(this).addClass("remove-bottom-border");
			}
		});
		
		$("#slide-down-p1").click(function() {
			$("#slide-show-p1").css("display","block");
		}).mouseover(function() {
			$("#slide-show-p1").css("display","block");
		});
		
		$("#slide-down-p2").click(function() {
			$("#slide-show-p2").css("display","block");
		}).mouseover(function() {
			$("#slide-show-p2").css("display","block");
		});
		
		$("#slide-down-p3").click(function() {
			$("#slide-show-p3").css("display","block");
		}).mouseover(function() {
			$("#slide-show-p3").css("display","block");
		});
	});
</script>
</body>
</html>

简生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery简易展板，仿国际版阿里巴巴。

这次的jQuery代码写得有点繁琐和混乱，而且多次出现重复代码，也懒得去修改了。sd-style.css#slide-down { width:753px; height:80px; position:absolute; top:100px; lef
复制链接

扫一扫

专栏目录