如何制作这个特效

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3607 天前的主题，其中的信息可能已经有所发展或是发生改变。

原来是这样的

点击红框后

JS应该怎么写
尝试这汇总写法！
http://jsfiddle.net/18932t45/
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function (){
$('.block').eq(1).click(function(event) {
$('.block').eq(1).width(400)
});
})

</script>
<style>
.fl{float: left;}
.content{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    border:1px solid #cccccc;
    margin-top: 150px;
    text-align: center

}
.content .block{
    width: 300px;
    height: 300px;
    background-color: green;
    margin: 10px;
}
.content .block .main{
    text-align: center;
}
.content .block .block{
    width: 300px;
    height: 300px;
    background-color: grey;
    margin: 10px;
}

</style>

</head>
<body>
<div class="content">
<div class="block fl">
<div class="main">asda</div>
</div>
<div class="block fl">
<div class="main"></div>
</div>
<div class="block fl">
<div class="main"></div>
</div>
</div>
</body>
</html>

但是效果不是我想要的！
求教应该如何布局与编写

div

class=

300px

1 条回复 • 2015-02-14 13:44:18 +08:00

Mutoo

2015-02-14 13:44:18 +08:00

之前看过的一个效果，不过跟你这个不太一样。
http://tympanus.net/Development/PFold/index3.html