您的位置：首页 > Web前端 > JavaScript

块排列并放大

2015-08-04 11:10 543 查看

<img src="https://img-blog.csdn.net/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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js css html

相关文章推荐

新的分享

章节导航