阿神2017-04-17 11:35:25
作為初學者，看樓主提問帶的標籤裡有JQ，就興致勃勃地寫了一下。其實樓上的CSS3屬性真心很好啊！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>两边展开</title>
<link rel="stylesheet" href="">
<style>
.content {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.content p {
position: absolute;
width: 49px;
height: 100px;
}
.left {
left: 0;
background-color: black;
margin-right: 2px;
}
.right {
background-color: black;
right: 0;
}
</style>
</head>
<body>
<p class="content">
<p class="left"></p>
<p class="right"></p>
</p>
<script src="js/jquery-1.12.0.min.js"></script>
<script>
$(function() {
$(".content").click(function() {
$(".left").animate({
left: "-49px"
}, 1000);
$(".right").animate({
right: "-49px"
}, 1000)
})
})
</script>
</body>
</html>
高洛峰2017-04-17 11:35:25
使用translateX(n)屬性，文件看下面
http://www.w3school.com.cn/css3/css3_2dtransform.asp