<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
right: 0;
top: 0;
overflow: hidden;
}
#arrow {
color: #fff;
background: #000;
width: 20px;
height: 90px;
line-height: 90px;
font-size: 12px;
font-family: "宋体";
text-align: center;
font-weight: bold;
float: left;
}
#col_box {
width: 400px;
height: 90px;
background: #eee;
float: left;
}
</style>
<script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/* 第一种方式 */
$(document).ready(function() {
var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
oArr.click(function() {
oMoveBox.animate({
"width" : "-=" + maxL
}, 600, function() {
maxL = -maxL;
})
});
});
</script>
</head>
<body>
<div id="box">
<div id="arrow">></div>
<div id="col_box">
隐藏<br>显示
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
right: 0;
top: 0;
overflow: hidden;
}
#arrow {
color: #fff;
background: #000;
width: 20px;
height: 90px;
line-height: 90px;
font-size: 12px;
font-family: "宋体";
text-align: center;
font-weight: bold;
float: left;
}
#col_box {
width: 400px;
height: 90px;
background: #eee;
float: left;
}
</style>
<script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/* 第一种方式 */
$(document).ready(function() {
var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
oArr.click(function() {
oMoveBox.animate({
"width" : "-=" + maxL
}, 600, function() {
maxL = -maxL;
})
});
});
</script>
</head>
<body>
<div id="box">
<div id="arrow">></div>
<div id="col_box">
隐藏<br>显示
</div>
</div>
</body>
</html>