块排列并放大

最新推荐文章于 2025-08-22 14:43:59 发布

原创最新推荐文章于 2025-08-22 14:43:59 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html

本文探讨了网页中通过CSS和JavaScript实现动态效果与交互的方法，包括浮动布局、响应式设计、事件监听与处理，以及如何利用类切换实现元素放大与还原的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img src="https://img-blog.youkuaiyun.com/20150804140151477?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><html>
<head>
<style type="text/css">
	#test{
		float:left;
		width:110px;
		height:355px;
	}
	.test{
		background-color:#cdc;
		margin:5px;
		font-size:20px;
		color:black;
		text-align:center;
	}
	
	
	.test1,#test11{
		height:200px;
		width:100px;
	}
	.test2,#test22{
		height:150px;
		width:100px;
	}
	.test3,#test33{
		height:355px;
		width:300px;
		float:left;
	}
	.enlarge{
		position:relative;
		height:125%;
		width:125%;
		
		background-color:#fef;
		font-weight:bold;
		font-size:40px;
		border:2px black solid;
	}
</style>
</head>
<body>
	<div id="test">
		<div id="test11">
			<div id="test1" class="test test1" onmouseover="enlarge('test1')" onmouseout="recovery('test1')">
				A
			</div>
		</div>
		<div id="test22">
			<div id="test2" class="test test2" onmouseover="enlarge('test2')" onmouseout="recovery('test2')">
				B
			</div>
		</div>
	</div>
	<div id="test33">
		<div id="test3" class="test test3" onmouseover="enlarge('test3')" onmouseout="recovery('test3')">
			C
		</div>
	</div>
</body>
<script type="text/javascript">
	var cls="enlarge";
	function hasClass(obj,cls)
	{
		return (new RegExp("(\\s|^)"+cls+"(\\s|$)")).test(obj.className);
	}
	
	function addClass(obj,cls)
	{
		obj.className+=" "+cls;
	}
	
	function removeClass(obj,cls)
	{
		var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
		obj.className= obj.className.replace(reg,"");
	}
	
	function toggleClass(obj,cls)
	{
		if(hasClass(obj,cls))
		{
			removeClass(obj,cls);
		}
		else
		{
			addClass(obj,cls);
		}
	}
	
	function enlarge(idname){
		toggleClass(document.getElementById(idname),cls);
	}
	function recovery(idname){
		toggleClass(document.getElementById(idname),cls);
	}
</script>
</html>