效果如图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>照片墙</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #222;
overflow: hidden;
user-select: none;
}
@keyframes rotate {
100% {
transform: rotateY(360deg);
}
}
.perspective {
perspective: 600px;
}
.wrap {
width: 135px;
height: 240px;
margin: 100px auto;
position: relative;
transform: rotateX(-20deg) rotateY(0deg);
transform-style: preserve-3d;
}
.wrap img {
display: block;
/* 绝对定位 */
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(0deg) translateZ(0px);
background: transparent;
box-shadow: 0 0 4px #fff;
border-radius: 5px;
}
/* 照片底座 */
.wrap p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
position: absolute;
border-radius: 50%;
left: 50%;
top: 100%;
margin-left: -600px;
margin-top: -600px;
/* 沿着x轴按倒 */
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div id="app">
<p></p>
</div>
<script>
Vue.config.devtools = true
const Moveone ={
template:`
<div class="perspective" >
<div class="wrap" id="imgwrap">
<img class="f1" :src="one.pic" v-for="one in ones"/>
<img class="f2" :src="two.pic" v-for="two in twos"/>
<img class="f3" :src="three.pic" v-for="three in threes"/>
</div>
</div>
`,
data(){
return {
ones:[
{
"title": "肖申克的救赎",
"url": "https://movie.douban.com/subject/1292052/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
"rating_num": "9.7",
"commment_num": "2811907人评价",
"info": "导演:弗兰克·德拉邦特FrankDarabont主演:蒂姆·罗宾斯TimRobbins/...1994/美国/犯罪剧情"
},
{
"title": "霸王别姬",
"url": "https://movie.douban.com/subject/1291546/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
"rating_num": "9.6",
"commment_num": "2079763人评价",
"info": "导演:陈凯歌KaigeChen主演:张国荣LeslieCheung/张丰毅FengyiZha...1993/中国大陆中国香港/剧情爱情同性"
},
{
"title": "阿甘正传",
"url": "https://movie.douban.com/subject/1292720/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
"rating_num": "9.5",
"commment_num": "2105656人评价",
"info": "导演:罗伯特·泽米吉斯RobertZemeckis主演:汤姆·汉克斯TomHanks/...1994/美国/剧情爱情"
},
{
"title": "泰坦尼克号",
"url": "https://movie.douban.com/subject/1292722/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
"rating_num": "9.5",
"commment_num": "2069037人评价",
"info": "导演:詹姆斯·卡梅隆JamesCameron主演:莱昂纳多·迪卡普里奥Leonardo...1997/美国墨西哥澳大利亚加拿大/剧情爱情灾难"
},
{
"title": "这个杀手不太冷",
"url": "https://movie.douban.com/subject/1295644/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
"rating_num": "9.4",
"commment_num": "2240625人评价",
"info": "导演:吕克·贝松LucBesson主演:让·雷诺JeanReno/娜塔莉·波特曼...1994/法国美国/剧情动作犯罪"
},
{
"title": "美丽人生",
"url": "https://movie.douban.com/subject/1292063/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
"rating_num": "9.6",
"commment_num": "1293821人评价",
"info": "导演:罗伯托·贝尼尼RobertoBenigni主演:罗伯托·贝尼尼RobertoBeni...1997/意大利/剧情喜剧爱情战争"
},
{
"title": "千与千寻",
"url": "https://movie.douban.com/subject/1291561/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"rating_num": "9.4",
"commment_num": "2181812人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:柊瑠美RumiHîragi/入野自由Miy...2001/日本/剧情动画奇幻"
},
{
"title": "辛德勒的名单",
"url": "https://movie.douban.com/subject/1295124/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
"rating_num": "9.6",
"commment_num": "1077941人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:连姆·尼森LiamNeeson...1993/美国/剧情历史战争"
},
{
"title": "盗梦空间",
"url": "https://movie.douban.com/subject/3541415/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
"rating_num": "9.4",
"commment_num": "2011932人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:莱昂纳多·迪卡普里奥Le...2010/美国英国/剧情科幻悬疑冒险"
},
{
"title": "星际穿越",
"url": "https://movie.douban.com/subject/1889243/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"rating_num": "9.4",
"commment_num": "1773926人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...2014/美国英国加拿大/剧情科幻冒险"
},
{
"title": "楚门的世界",
"url": "https://movie.douban.com/subject/1292064/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p479682972.jpg",
"rating_num": "9.4",
"commment_num": "1646062人评价",
"info": "导演:彼得·威尔PeterWeir主演:金·凯瑞JimCarrey/劳拉·琳妮Lau...1998/美国/剧情科幻"
},
{
"title": "忠犬八公的故事",
"url": "https://movie.douban.com/subject/3011091/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p524964039.jpg",
"rating_num": "9.4",
"commment_num": "1366099人评价",
"info": "导演:莱塞·霍尔斯道姆LasseHallström主演:理查·基尔RichardGer...2009/美国英国/剧情"
},
{
"title": "海上钢琴师",
"url": "https://movie.douban.com/subject/1292001/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2574551676.jpg",
"rating_num": "9.3",
"commment_num": "1638117人评价",
"info": "导演:朱塞佩·托纳多雷GiuseppeTornatore主演:蒂姆·罗斯TimRoth/...1998/意大利/剧情音乐"
},
{
"title": "三傻大闹宝莱坞",
"url": "https://movie.douban.com/subject/3793023/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p579729551.jpg",
"rating_num": "9.2",
"commment_num": "1816362人评价",
"info": "导演:拉库马·希拉尼RajkumarHirani主演:阿米尔·汗AamirKhan/卡...2009/印度/剧情喜剧爱情歌舞"
},
{
"title": "放牛班的春天",
"url": "https://movie.douban.com/subject/1291549/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2884280708.jpg",
"rating_num": "9.3",
"commment_num": "1280292人评价",
"info": "导演:克里斯托夫·巴拉蒂ChristopheBarratier主演:让-巴蒂斯特·莫尼...2004/法国瑞士德国/剧情音乐"
},
{
"title": "机器人总动员",
"url": "https://movie.douban.com/subject/2131459/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p1461851991.jpg",
"rating_num": "9.3",
"commment_num": "1285356人评价",
"info": "导演:安德鲁·斯坦顿AndrewStanton主演:本·贝尔特BenBurtt/艾丽...2008/美国/科幻动画冒险"
},
{
"title": "无间道",
"url": "https://movie.douban.com/subject/1307914/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"rating_num": "9.3",
"commment_num": "1323373人评价",
"info": "导演:刘伟强/麦兆辉主演:刘德华AndyLau/梁朝伟TonyLeungChiuW...2002/中国香港/剧情犯罪惊悚"
},
{
"title": "疯狂动物城",
"url": "https://movie.douban.com/subject/25662329/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614500649.jpg",
"rating_num": "9.2",
"commment_num": "1873449人评价",
"info": "导演:拜伦·霍华德ByronHoward/瑞奇·摩尔RichMoore主演:金妮弗·...2016/美国/喜剧动画冒险"
},
{
"title": "控方证人",
"url": "https://movie.douban.com/subject/1296141/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1505392928.jpg",
"rating_num": "9.6",
"commment_num": "530423人评价",
"info": "导演:比利·怀尔德BillyWilder主演:泰隆·鲍华TyronePower/玛琳·...1957/美国/剧情犯罪悬疑"
},
{
"title": "大话西游之大圣娶亲",
"url": "https://movie.douban.com/subject/1292213/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg",
"rating_num": "9.2",
"commment_num": "1495738人评价",
"info": "导演:刘镇伟JeffreyLau主演:周星驰StephenChow/吴孟达ManTatNg...1995/中国香港中国大陆/喜剧爱情奇幻古装"
},
{
"title": "熔炉",
"url": "https://movie.douban.com/subject/5912992/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1363250216.jpg",
"rating_num": "9.4",
"commment_num": "910039人评价",
"info": "导演:黄东赫Dong-hyukHwang主演:孔侑YooGong/郑有美Yu-miJung/...2011/韩国/剧情"
},
{
"title": "教父",
"url": "https://movie.douban.com/subject/1291841/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p616779645.jpg",
"rating_num": "9.3",
"commment_num": "939147人评价",
"info": "导演:弗朗西斯·福特·科波拉FrancisFordCoppola主演:马龙·白兰度M...1972/美国/剧情犯罪"
},
{
"title": "当幸福来敲门",
"url": "https://movie.douban.com/subject/1849031/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg",
"rating_num": "9.2",
"commment_num": "1483681人评价",
"info": "导演:加布里尔·穆奇诺GabrieleMuccino主演:威尔·史密斯WillSmith...2006/美国/剧情传记家庭"
}
],
twos:[
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "怦然心动",
"url": "https://movie.douban.com/subject/3319755/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p501177648.jpg",
"rating_num": "9.1",
"commment_num": "1787673人评价",
"info": "导演:罗伯·莱纳RobReiner主演:玛德琳·卡罗尔MadelineCarroll/卡...2010/美国/剧情喜剧爱情"
},
{
"title": "龙猫",
"url": "https://movie.douban.com/subject/1291560/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2540924496.jpg",
"rating_num": "9.2",
"commment_num": "1232938人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:日高法子NorikoHidaka/坂本千夏Ch...1988/日本/动画奇幻冒险"
},
{
"title": "末代皇帝",
"url": "https://movie.douban.com/subject/1293172/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p452089833.jpg",
"rating_num": "9.3",
"commment_num": "850522人评价",
"info": "导演:贝纳尔多·贝托鲁奇BernardoBertolucci主演:尊龙JohnLone/陈...1987/英国意大利中国大陆法国/剧情传记历史"
},
{
"title": "寻梦环游记",
"url": "https://movie.douban.com/subject/20495023/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614500706.jpg",
"rating_num": "9.1",
"commment_num": "1623114人评价",
"info": "导演:李·昂克里奇LeeUnkrich/阿德里安·莫利纳AdrianMolina主演:...2017/美国/喜剧动画奇幻音乐"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "蝙蝠侠：黑暗骑士",
"url": "https://movie.douban.com/subject/1851857/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p462657443.jpg",
"rating_num": "9.2",
"commment_num": "1029419人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:克里斯蒂安·贝尔Christ...2008/美国英国/剧情动作科幻犯罪惊悚"
},
{
"title": "哈利·波特与魔法石",
"url": "https://movie.douban.com/subject/1295038/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg",
"rating_num": "9.2",
"commment_num": "1150068人评价",
"info": "导演:ChrisColumbus主演:DanielRadcliffe/EmmaWatson/RupertGrint2001/美国英国/奇幻冒险"
},
{
"title": "指环王3：王者无敌",
"url": "https://movie.douban.com/subject/1291552/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2642829472.jpg",
"rating_num": "9.3",
"commment_num": "781781人评价",
"info": "导演:彼得·杰克逊PeterJackson主演:伊利亚·伍德ElijahWood/西恩...2003/美国新西兰/剧情动作奇幻冒险"
},
{
"title": "乱世佳人",
"url": "https://movie.douban.com/subject/1300267/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1963126880.jpg",
"rating_num": "9.3",
"commment_num": "672607人评价",
"info": "导演:维克多·弗莱明VictorFleming/乔治·库克GeorgeCukor主演:费...1939/美国/剧情历史爱情战争"
},
{
"title": "我不是药神",
"url": "https://movie.douban.com/subject/26752088/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561305376.jpg",
"rating_num": "9.0",
"commment_num": "2046591人评价",
"info": "导演:文牧野MuyeWen主演:徐峥ZhengXu/王传君ChuanjunWang/周...2018/中国大陆/剧情喜剧"
},
{
"title": "素媛",
"url": "https://movie.douban.com/subject/21937452/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2118532944.jpg",
"rating_num": "9.3",
"commment_num": "668345人评价",
"info": "导演:李濬益Jun-ikLee主演:薛景求Kyung-guSol/严志媛Ji-wonUhm...2013/韩国/剧情"
},
{
"title": "飞屋环游记",
"url": "https://movie.douban.com/subject/2129039/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2363116942.jpg",
"rating_num": "9.1",
"commment_num": "1291163人评价",
"info": "导演:彼特·道格特PeteDocter/鲍勃·彼德森BobPeterson主演:爱德...2009/美国/剧情喜剧动画冒险"
},
{
"title": "何以为家",
"url": "https://movie.douban.com/subject/30170448/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2555295759.jpg",
"rating_num": "9.1",
"commment_num": "1017900人评价",
"info": "导演:娜丁·拉巴基NadineLabaki主演:扎因·拉费阿Zainal-Rafeea/...2018/黎巴嫩美国法国塞浦路斯卡塔尔英国/剧情"
},
{
"title": "十二怒汉",
"url": "https://movie.douban.com/subject/1293182/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2173577632.jpg",
"rating_num": "9.4",
"commment_num": "474061人评价",
"info": "导演:SidneyLumet主演:亨利·方达HenryFonda/马丁·鲍尔萨姆Marti...1957/美国/剧情"
},
{
"title": "摔跤吧！爸爸",
"url": "https://movie.douban.com/subject/26387939/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2401676338.jpg",
"rating_num": "9.0",
"commment_num": "1533035人评价",
"info": "导演:涅提·蒂瓦里NiteshTiwari主演:阿米尔·汗AamirKhan/法缇玛...2016/印度/剧情传记运动家庭"
},
{
"title": "哈尔的移动城堡",
"url": "https://movie.douban.com/subject/1308807/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2174346180.jpg",
"rating_num": "9.1",
"commment_num": "991603人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:倍赏千惠子ChiekoBaishô/木村拓...2004/日本/动画奇幻冒险"
},
{
"title": "鬼子来了",
"url": "https://movie.douban.com/subject/1291858/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2553104888.jpg",
"rating_num": "9.3",
"commment_num": "609726人评价",
"info": "导演:姜文WenJiang主演:姜文WenJiang/香川照之TeruyukiKagawa/...2000/中国大陆/剧情喜剧"
},
{
"title": "少年派的奇幻漂流",
"url": "https://movie.douban.com/subject/1929463/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p1784592701.jpg",
"rating_num": "9.1",
"commment_num": "1320801人评价",
"info": "导演:李安AngLee主演:苏拉·沙玛SurajSharma/伊尔凡·可汗Irrfan...2012/美国中国台湾英国加拿大/剧情奇幻冒险"
},
{
"title": "让子弹飞",
"url": "https://movie.douban.com/subject/3742360/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1512562287.jpg",
"rating_num": "9.0",
"commment_num": "1654268人评价",
"info": "导演:姜文WenJiang主演:姜文WenJiang/葛优YouGe/周润发Yun-F...2010/中国大陆中国香港/剧情喜剧动作西部"
},
{
"title": "猫鼠游戏",
"url": "https://movie.douban.com/subject/1305487/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p453924541.jpg",
"rating_num": "9.1",
"commment_num": "987258人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:莱昂纳多·迪卡普里奥L...2002/美国加拿大/传记犯罪剧情"
},
{
"title": "海蒂和爷爷",
"url": "https://movie.douban.com/subject/25958717/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554525534.jpg",
"rating_num": "9.3",
"commment_num": "580195人评价",
"info": "导演:阿兰·葛斯彭纳AlainGsponer主演:阿努克·斯特芬AnukSteffen/...2015/德国瑞士/剧情冒险家庭"
},
{
"title": "钢琴家",
"url": "https://movie.douban.com/subject/1296736/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p1381339291.jpg",
"rating_num": "9.3",
"commment_num": "614601人评价",
"info": "导演:罗曼·波兰斯基RomanPolanski主演:艾德里安·布洛迪AdrienBrod...2002/英国法国波兰德国/剧情传记战争音乐"
},
{
"title": "大话西游之月光宝盒",
"url": "https://movie.douban.com/subject/1299398/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2561721372.jpg",
"rating_num": "9.0",
"commment_num": "1191451人评价",
"info": "导演:刘镇伟JeffreyLau主演:周星驰StephenChow/吴孟达ManTatNg...1995/中国香港中国大陆/喜剧爱情奇幻古装"
},
{
"title": "天空之城",
"url": "https://movie.douban.com/subject/1291583/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2888647044.jpg",
"rating_num": "9.2",
"commment_num": "798703人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:田中真弓MayumiTanaka/横泽启子Ke...1986/日本/动画奇幻冒险"
},
{
"title": "指环王2：双塔奇兵",
"url": "https://movie.douban.com/subject/1291572/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2640236255.jpg",
"rating_num": "9.2",
"commment_num": "732198人评价",
"info": "导演:彼得·杰克逊PeterJackson主演:伊利亚·伍德ElijahWood/西恩...2002/美国新西兰/剧情动作奇幻冒险"
},
{
"title": "闻香识女人",
"url": "https://movie.douban.com/subject/1298624/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2550757929.jpg",
"rating_num": "9.1",
"commment_num": "855846人评价",
"info": "导演:马丁·布莱斯MartinBrest主演:阿尔·帕西诺AlPacino/克里斯...1992/美国/剧情"
},
{
"title": "天堂电影院",
"url": "https://movie.douban.com/subject/1291828/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2653054340.jpg",
"rating_num": "9.2",
"commment_num": "665405人评价",
"info": "导演:朱塞佩·托纳多雷GiuseppeTornatore主演:菲利普·努瓦雷Philipp...1988/意大利法国/剧情爱情"
}
],
threes:[
{
"title": "触不可及",
"url": "https://movie.douban.com/subject/6786002/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"rating_num": "9.3",
"commment_num": "1078385人评价",
"info": "导演:奥利维·那卡什OlivierNakache/艾力克·托兰达EricToledano主...2011/法国/剧情喜剧"
},
{
"title": "怦然心动",
"url": "https://movie.douban.com/subject/3319755/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p501177648.jpg",
"rating_num": "9.1",
"commment_num": "1787673人评价",
"info": "导演:罗伯·莱纳RobReiner主演:玛德琳·卡罗尔MadelineCarroll/卡...2010/美国/剧情喜剧爱情"
},
{
"title": "龙猫",
"url": "https://movie.douban.com/subject/1291560/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2540924496.jpg",
"rating_num": "9.2",
"commment_num": "1232938人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:日高法子NorikoHidaka/坂本千夏Ch...1988/日本/动画奇幻冒险"
},
{
"title": "末代皇帝",
"url": "https://movie.douban.com/subject/1293172/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p452089833.jpg",
"rating_num": "9.3",
"commment_num": "850522人评价",
"info": "导演:贝纳尔多·贝托鲁奇BernardoBertolucci主演:尊龙JohnLone/陈...1987/英国意大利中国大陆法国/剧情传记历史"
},
{
"title": "寻梦环游记",
"url": "https://movie.douban.com/subject/20495023/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614500706.jpg",
"rating_num": "9.1",
"commment_num": "1623114人评价",
"info": "导演:李·昂克里奇LeeUnkrich/阿德里安·莫利纳AdrianMolina主演:...2017/美国/喜剧动画奇幻音乐"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "活着",
"url": "https://movie.douban.com/subject/1292365/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2597919477.jpg",
"rating_num": "9.3",
"commment_num": "819000人评价",
"info": "导演:张艺谋YimouZhang主演:葛优YouGe/巩俐LiGong/姜武WuJiang1994/中国大陆中国香港/剧情历史家庭"
},
{
"title": "蝙蝠侠：黑暗骑士",
"url": "https://movie.douban.com/subject/1851857/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p462657443.jpg",
"rating_num": "9.2",
"commment_num": "1029419人评价",
"info": "导演:克里斯托弗·诺兰ChristopherNolan主演:克里斯蒂安·贝尔Christ...2008/美国英国/剧情动作科幻犯罪惊悚"
},
{
"title": "哈利·波特与魔法石",
"url": "https://movie.douban.com/subject/1295038/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg",
"rating_num": "9.2",
"commment_num": "1150068人评价",
"info": "导演:ChrisColumbus主演:DanielRadcliffe/EmmaWatson/RupertGrint2001/美国英国/奇幻冒险"
},
{
"title": "指环王3：王者无敌",
"url": "https://movie.douban.com/subject/1291552/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2642829472.jpg",
"rating_num": "9.3",
"commment_num": "781781人评价",
"info": "导演:彼得·杰克逊PeterJackson主演:伊利亚·伍德ElijahWood/西恩...2003/美国新西兰/剧情动作奇幻冒险"
},
{
"title": "乱世佳人",
"url": "https://movie.douban.com/subject/1300267/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1963126880.jpg",
"rating_num": "9.3",
"commment_num": "672607人评价",
"info": "导演:维克多·弗莱明VictorFleming/乔治·库克GeorgeCukor主演:费...1939/美国/剧情历史爱情战争"
},
{
"title": "我不是药神",
"url": "https://movie.douban.com/subject/26752088/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561305376.jpg",
"rating_num": "9.0",
"commment_num": "2046591人评价",
"info": "导演:文牧野MuyeWen主演:徐峥ZhengXu/王传君ChuanjunWang/周...2018/中国大陆/剧情喜剧"
},
{
"title": "素媛",
"url": "https://movie.douban.com/subject/21937452/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2118532944.jpg",
"rating_num": "9.3",
"commment_num": "668345人评价",
"info": "导演:李濬益Jun-ikLee主演:薛景求Kyung-guSol/严志媛Ji-wonUhm...2013/韩国/剧情"
},
{
"title": "飞屋环游记",
"url": "https://movie.douban.com/subject/2129039/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2363116942.jpg",
"rating_num": "9.1",
"commment_num": "1291163人评价",
"info": "导演:彼特·道格特PeteDocter/鲍勃·彼德森BobPeterson主演:爱德...2009/美国/剧情喜剧动画冒险"
},
{
"title": "何以为家",
"url": "https://movie.douban.com/subject/30170448/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2555295759.jpg",
"rating_num": "9.1",
"commment_num": "1017900人评价",
"info": "导演:娜丁·拉巴基NadineLabaki主演:扎因·拉费阿Zainal-Rafeea/...2018/黎巴嫩美国法国塞浦路斯卡塔尔英国/剧情"
},
{
"title": "十二怒汉",
"url": "https://movie.douban.com/subject/1293182/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2173577632.jpg",
"rating_num": "9.4",
"commment_num": "474061人评价",
"info": "导演:SidneyLumet主演:亨利·方达HenryFonda/马丁·鲍尔萨姆Marti...1957/美国/剧情"
},
{
"title": "摔跤吧！爸爸",
"url": "https://movie.douban.com/subject/26387939/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2401676338.jpg",
"rating_num": "9.0",
"commment_num": "1533035人评价",
"info": "导演:涅提·蒂瓦里NiteshTiwari主演:阿米尔·汗AamirKhan/法缇玛...2016/印度/剧情传记运动家庭"
},
{
"title": "哈尔的移动城堡",
"url": "https://movie.douban.com/subject/1308807/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2174346180.jpg",
"rating_num": "9.1",
"commment_num": "991603人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:倍赏千惠子ChiekoBaishô/木村拓...2004/日本/动画奇幻冒险"
},
{
"title": "鬼子来了",
"url": "https://movie.douban.com/subject/1291858/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2553104888.jpg",
"rating_num": "9.3",
"commment_num": "609726人评价",
"info": "导演:姜文WenJiang主演:姜文WenJiang/香川照之TeruyukiKagawa/...2000/中国大陆/剧情喜剧"
},
{
"title": "少年派的奇幻漂流",
"url": "https://movie.douban.com/subject/1929463/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p1784592701.jpg",
"rating_num": "9.1",
"commment_num": "1320801人评价",
"info": "导演:李安AngLee主演:苏拉·沙玛SurajSharma/伊尔凡·可汗Irrfan...2012/美国中国台湾英国加拿大/剧情奇幻冒险"
},
{
"title": "让子弹飞",
"url": "https://movie.douban.com/subject/3742360/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1512562287.jpg",
"rating_num": "9.0",
"commment_num": "1654268人评价",
"info": "导演:姜文WenJiang主演:姜文WenJiang/葛优YouGe/周润发Yun-F...2010/中国大陆中国香港/剧情喜剧动作西部"
},
{
"title": "猫鼠游戏",
"url": "https://movie.douban.com/subject/1305487/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p453924541.jpg",
"rating_num": "9.1",
"commment_num": "987258人评价",
"info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:莱昂纳多·迪卡普里奥L...2002/美国加拿大/传记犯罪剧情"
},
{
"title": "海蒂和爷爷",
"url": "https://movie.douban.com/subject/25958717/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554525534.jpg",
"rating_num": "9.3",
"commment_num": "580195人评价",
"info": "导演:阿兰·葛斯彭纳AlainGsponer主演:阿努克·斯特芬AnukSteffen/...2015/德国瑞士/剧情冒险家庭"
},
{
"title": "钢琴家",
"url": "https://movie.douban.com/subject/1296736/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p1381339291.jpg",
"rating_num": "9.3",
"commment_num": "614601人评价",
"info": "导演:罗曼·波兰斯基RomanPolanski主演:艾德里安·布洛迪AdrienBrod...2002/英国法国波兰德国/剧情传记战争音乐"
},
{
"title": "大话西游之月光宝盒",
"url": "https://movie.douban.com/subject/1299398/",
"pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2561721372.jpg",
"rating_num": "9.0",
"commment_num": "1191451人评价",
"info": "导演:刘镇伟JeffreyLau主演:周星驰StephenChow/吴孟达ManTatNg...1995/中国香港中国大陆/喜剧爱情奇幻古装"
},
{
"title": "天空之城",
"url": "https://movie.douban.com/subject/1291583/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2888647044.jpg",
"rating_num": "9.2",
"commment_num": "798703人评价",
"info": "导演:宫崎骏HayaoMiyazaki主演:田中真弓MayumiTanaka/横泽启子Ke...1986/日本/动画奇幻冒险"
},
{
"title": "指环王2：双塔奇兵",
"url": "https://movie.douban.com/subject/1291572/",
"pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2640236255.jpg",
"rating_num": "9.2",
"commment_num": "732198人评价",
"info": "导演:彼得·杰克逊PeterJackson主演:伊利亚·伍德ElijahWood/西恩...2002/美国新西兰/剧情动作奇幻冒险"
},
{
"title": "闻香识女人",
"url": "https://movie.douban.com/subject/1298624/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2550757929.jpg",
"rating_num": "9.1",
"commment_num": "855846人评价",
"info": "导演:马丁·布莱斯MartinBrest主演:阿尔·帕西诺AlPacino/克里斯...1992/美国/剧情"
},
{
"title": "天堂电影院",
"url": "https://movie.douban.com/subject/1291828/",
"pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2653054340.jpg",
"rating_num": "9.2",
"commment_num": "665405人评价",
"info": "导演:朱塞佩·托纳多雷GiuseppeTornatore主演:菲利普·努瓦雷Philipp...1988/意大利法国/剧情爱情"
}
],
}
}
}
var vm1=new Vue({
template:`<Moveone></Moveone> ,
`,
el:'#app',
components:{
Moveone
}
})
</script>
</script>
<!-- src="JS/photo.js" -->
<script type="text/javascript">
var oImg = document.getElementsByClassName('f1')
var oImg2 = document.getElementsByClassName('f2')
var oImg3 = document.getElementsByClassName('f3')
var len = oImg.length;
console.log(len)
var deg = 360 / len;
var oWrap = document.getElementById("imgwrap");
// var oWrap=document.querySelector('.wrap');
//页面加载完毕在执行的代码
window.onload = function () {
Array.prototype.forEach.call(oImg, function (ele, index, self) {
// 旋转并沿Z轴平移
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
//过渡时间1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
Array.prototype.forEach.call(oImg2, function (ele, index, self) {
// 旋转并沿Z轴平移
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
//过渡时间1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
Array.prototype.forEach.call(oImg3, function (ele, index, self) {
// 旋转并沿Z轴平移
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
//过渡时间1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
Array.prototype.forEach.call(oImg, function (ele, index, self) {
// 旋转并沿Z轴平移
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
//过渡时间1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
}
//翻动3D相册
var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
document.onmousedown = function (e) {
// 点击设置初值
lastX = e.clientX;
lastY = e.clientY;
this.onmousemove = function (e) {
newX = e.clientX;
newY = e.clientY;
minusX = newX - lastX;
minusY = newY - lastY;
rotX -= minusY * 0.2;
rotY += minusX * 0.1;
oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
lastX = newX;
lastY = newY;
}
this.onmouseup = function (e) {
//鼠标松开
this.onmousemove = null;//清除鼠标移动
}
}
</script>
</body>
</html>
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
