css+html+vue.js电影墙案例

已于 2023-04-06 16:11:43 修改
阅读量286 收藏 8
点赞数
文章标签： css html vue.js
于 2023-04-06 16:08:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65270579/article/details/129992012
版权

style.css部分代码：



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
}
li{
  list-style: none;
}

/* 人物代码 */
.container {
  /* height:100%; */
  width: 1024px;
  margin:50px;
}
.person {
  position: absolute;
  height: 30px;
  width: 0;
  color: #040303;
  left: 0px;
  top: 30px;
  transform-origin: 50% 50% 0px;
  -webkit-animation: sprint 5s infinite ease-in;
}
.person .head:before {
  content: "这是豆瓣top250哟";
  position: absolute;
  top: 0px;
  left: -6px;
  height: 2.7px;
  width: 100px;
  border-radius: 20%;
  /* border: 4px solid rgb(17, 16, 16);
  background-color: #141111; */
  transform-origin: 50% 100% 0px;
  z-index: 90;
}
.person .head {
  position: absolute;
  top: -30px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 4px solid rgb(247, 135, 135);
  transform-origin: 50% 100% 0px;
  z-index: 90;
  -webkit-animation: bob 5s infinite alternate;
}
.person .head:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 9px;
  height: 12px;
  width: 15px;
  border-radius: 30%;
  border: 4px solid rgb(56, 54, 54);
  background-color: #0b0a0a;
  z-index: 90;
}
.person .torso {
  position: absolute;
  height: 60px;
  width: 0;
  border-left: 2px solid rgb(34, 31, 31);
  left: 0px;
  top: 15px;
  z-index: 90;
}
.person .part {
  position: absolute;
  left: 0;
  top: 75px;
  z-index: 90;
}
.person .part.arm {
  position: absolute;
  border-left: 3px solid rgb(50, 46, 46);
  border-bottom: 3px solid rgb(27, 25, 25);
  height: 45px;
  width: 39px;
  top: 15px;
  right: 300px;
  transform-origin: 0% 0% 0px;
  -webkit-animation: pump 5s infinite ease-in-out;
}
.person .part.arm.one {
  transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
  transform: rotate3d(0, 0, 1, -90deg);
  animation-delay: 5s;
}
.person .part.leg {
  height: 30px;
  width: 60px;
  border-right: 3px solid rgb(47, 43, 43);
  border-top: 3px solid rgb(28, 25, 25);
  -webkit-animation: run 4s infinite ease-in;
  transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
  transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
  transform: rotate3d(0, 0, 1, 80deg);
  animation-delay: 5s;
}
.person .part .foot {
  position: absolute;
  top: 90px;
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #020202;
  z-index: 900;
  border: 3px solid red;
}
@keyframes run {
  0% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 150deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
  }
}
@keyframes pump {
  0% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, -70deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 1, -180deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -100deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, 100deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes sprint {
  0% {
    transform-origin: 50% 50% 0px;
    transform: translate(-0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    transform-origin: 50% 50% 0px;
    transform: translate(2000px, 0px);
  }
}
/* 右边代码 */
.bigBox{
  margin-top: 140px;
  /* height: 100%; 
  width: 100%; */
  display: flex;


}
#right{
  margin-left: 300px;
  position: absolute;
    display: flex;
    flex-direction: row;
  justify-content: space-around; 
  flex-wrap: wrap;
  /* overflow:scroll; */
  width: 1600px;
height:832px
  
}
.card {
  
  position: relative;
  /* width: 320px;
  height: 450px; */
  /* background: #fff; */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}

.card .poster::before {
  content: '';
  position: absolute;
  bottom: -180px;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgb(101, 112, 164,0.3) 50%, transparent);

  transition: 0.5s;
  z-index: 1;
}

.card:hover .poster::before {
  bottom: 0;
}

.card .poster {
  position: relative;
  overflow: hidden;
}

.card .poster img {
  /* width: 100%; */
  height: 409px;
  width: 280px;
  transition: 0.5s;
}

.card:hover .poster img {
  /* transform: translateY(-50px); */
  filter: blur(5px); /* 高斯模糊 */
}

.card .details {
  position: absolute;
  bottom: -175px;
  left: 0;
  z-index: 2;
  width: 100%;
  /* padding: 20px; */
  transition: 0.5s;
}

.card:hover .details {
  bottom: 0;
}

.card .details .logo {
  max-width: 180px;
}

.card .details h3 {
  font-size: 0.8em;
  color: #fff;
}

.card .details .rating {
  position: relative;
  padding: 5px 0;
}

.card .details .rating .fa-star {
  color: #f7f406;
  font-size: 1em;
}

.card .details .rating span {
  color: #fff;
  margin-left: 10px;
}

.card .details .tags {
  position: relative;
  margin-top: 5px;
}

.card .details .tags span {
  padding: 2px 5px;
  color: #fff;
  background: #03a8f5;
  border-radius: 4px;
}

.card .details .tags span:nth-child(2) {
  background: #ff5722;
}

.card .details .info {
  color: #fff;
  margin-top: 20px;
}

.card .details .cast h4 {
  color: #fff;
  margin-top: 10px;
}

.card .details .cast ul {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.card .details .cast ul li {
  list-style: none;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
}

.card .details .cast ul li img {
  width: 100%;
}
#nav{
  background: #d7d9df;
  margin-left: 200px;
  position: fixed;
}
#nav ul{
  display: inline-block;
  border: 1px solid  #3b3f42;
}
#nav ul li{
  border: 1px solid  #262a2d;

}
li{
  font-size: 20px;
  font-family: 宋体;
}
#nav ul li.text{
background-color:rgba(212, 214, 224, 0.3);
}
#nav ul li a{
  position: relative;
  display: block;
  padding: 10px 20px;
  margin: 20px 0;
  text-decoration: none;
  text-transform: uppercase;
  color: #287484;
  font-weight: bold;
  transition:.5s ;

}
#nav ul li a:before
{
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
background-color:rgba(89, 114, 243, 0.3);

  border-top: 1px solid #6d5c5c;
  border-bottom: 1px solid #3c3535;
  transform: scaleY(2);
  opacity: 0;
  transition:.5s ;
}
#nav ul li a:hover:before
{
  transform: scaleY(1);
  opacity: 1;}
#nav ul li a::after
{
  content: '';
  position: absolute;
  top:0;
  left: 0;
  /* width: 100%;
  height: 100%; */
  background-color: #4c5463;
  opacity:0.7 ;
  transform: scaleY(0);
  transition:.5s ;
}
#nav ul li a:hover:after
{
  transform: scaleY(1);
}

index.html部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
 <title>豆瓣电影Top250</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.staticfile.org/vue/2.7.0/vue.js"></script>
</head>

<body style="background-color:rgba(37, 39, 47, 0.3)">
  <!-- 人物代码 -->
  <div class='container'>
    <div class='person'>
      <div class='head'></div>
      <div class='part arm one'></div>
      <div class='part arm two'></div>
      <div class='torso'></div>
      <div class='part leg one'></div>
      <div class='part foot one'></div>
      <div class='part leg two'></div>
      <div class='part foot two'></div>
    </div>
  </div>

  <div class="wrap">
  <div class="bigBox">
  <div id="left" >
    <div id="nav">
      <ul>
          <li  class="text"><a href="https://www.douban.com">首页</a></li>
          <li><a href="https://book.douban.com" >读书</a></li>
          <li><a href="https://movie.douban.com" >电影</a></li>
          <li><a href="https://music.douban.com">音乐</a></li>
          <li><a href="https://www.douban.com/location">同城</a></li>
          <li><a href="https://www.douban.com/roup" >小组</a></li>
          <li><a href="https://read.douban.com/?dcs=top-nav&dcm=douban" >阅读</a></li>
          <li><a href="https://fm.douban.com/user-guide" >FM</a></li>
          <li><a href="https://m.douban.com/time/?dt_time_source=douban-web_top_nav">时间</a></li>
          <li><a href="https://market.douban.com/?utm_campaign=douban_top_nav&utm_source=douban&utm_medium=pc_web" >豆品</a></li>
        </ul>
  </div>
  </div>
<div id="app">
  <Moveone></Moveone>

</div>
</div>
  <script> Vue.config.devtools = true
        const Moveone = {
            template: `
<div>
  <div id="right">
    
<div class="card" v-for="site in sites">
    <div class="poster">
      <img :src="site.pic" alt="">
    </div>
    <div class="details">
      <h1>{{site.title}}</h1>
      <p>{{site.info}}</p>
      <p>{{site.z}}</P>
      <span>{{site.rating_num}}</span>
      <span>{{site.commment_num}}</span>   
               
    </div>
  </div>
  </div>
            </div>
            `,
            data() {
              return {
            sites:[
            {
        "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/...",
        "z":"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...",
        "z":"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/...",
        "z":"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...",
        "z":"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/娜塔莉·波特曼...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"2014/美国英国加拿大/剧情科幻冒险"
    },
    {
        "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...",
        "z":"2002/中国香港/剧情犯罪惊悚"
    },
    {
        "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/玛琳·...",
        "z":"1957/美国/剧情犯罪悬疑"
    },{
        "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/...",
        "z":"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...",
        "z":"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/...",
        "z":"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...",
        "z":"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/娜塔莉·波特曼...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"2014/美国英国加拿大/剧情科幻冒险"
    },
    {
        "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...",
        "z":"2002/中国香港/剧情犯罪惊悚"
    },
    {
        "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/玛琳·...",
        "z":"1957/美国/剧情犯罪悬疑"
    },{
        "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/...",
        "z":"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...",
        "z":"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/...",
        "z":"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...",
        "z":"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/娜塔莉·波特曼...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"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...",
        "z":"2014/美国英国加拿大/剧情科幻冒险"
    },
    {
        "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...",
        "z":"2002/中国香港/剧情犯罪惊悚"
    },
    {
        "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/玛琳·...",
        "z":"1957/美国/剧情犯罪悬疑"
    },
    {
        "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...",
        "z":"2014/美国英国加拿大/剧情科幻冒险"
    },
    {
        "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...",
        "z":"2002/中国香港/剧情犯罪惊悚"
    },
    {
        "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/玛琳·...",
        "z":"1957/美国/剧情犯罪悬疑"
    },{
        "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/玛琳·...",
        "z":"1957/美国/剧情犯罪悬疑"
    },
            ]
            }
          }
        }
           
    new Vue({
      
      el:'#app',
      components:{
              Moveone
            }
    })
  </script>
  <script language=javascript>
    function hero()
    {
    var herowidth=2000;//改为你要的网页宽度
    var heroheight=832;//改为你要的网页高度
    window.resizeTo(herowidth,heroheight);
    }
    hero();
    </script>
</body>

</html>

效果图：

Forward九街
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
videowall:HTML视频墙
04-29
视频墙 先决条件 网络浏览器 NodeJS（可选） 描述 它是一个简单的视频墙，可在浏览器中运行，而无需Web服务器。 布局可以更改。 由于浏览器无法访问文件系统，因此视频文件列表必须在名为playlist.js的Javascript文件中生成。 以1×1布局一个接一个地观看几个视频特别有用。 playlist.js格式 playlist = [ "../file_1.mp4" , "../file_2.mp4" ] 用法 生成包含视频路径的playlist.js文件。 可以手动完成此操作，也可以使用以下NodeJS脚本完成此操作： node make_playlist.js 双击videowall.html在浏览器中将其打开。 捷径 按k在所有播放器中切换播放和暂停。 使用鼠标滚轮在当前光标所在的播放器中播放下一个或上一个视频。 按←或→在所有播放器中播放下一个或上一个视频。
html+css+js+vue实现静态的仿饿了么页面
07-01
html+css+js+vue实现静态的仿饿了么页面
通用权限管理系统前端页面+html5+css3+javascript+vue+elementui
05-30
系统后端使用 Spring Boot框架开发，前端使用的是 Vue框架和 Element UI的组件，持久层框架使用 MyBatis，数据库使用 MySQL。 系统支持基于角色的用户权限分配功能。用户只有被分配的权限才能访问相应的资源。该系统通过账号、密码和登录验证来匹配用户的不同访问权限。使用一套代码实现多个系统的共享，并实现用户信息权限的隔离。如果需要添加新的功能，程序员只需维护权限表并设计一个权限系统即可。该系统支持动态配置权限和角色之间的关联信息，以及用户和角色之间的关系。只需在数据库中配置权限信息，系统就可以动态地读取角色和权限信息，并由管理员将二者关联起来。前端页面只需在该系统的基础上添加，并分配好权限即可。该系统使用动态路由，使得前端页面的添加变得更加容易。可用于毕设项目学习
购书静态网页设计与实现，原生HTML+CSS+Javascript实现！
04-01
购书+阅读静态网页设计与实现，原生HTML+CSS+Javascript，基本实现网站经典功能：图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标点击提示、加载提示，体验前端开发的过程，小白入门前端开发案例的最佳案例，结合博文https://csdn-czh.blog.csdn.net/article/details/108407720 详细步骤，开箱即用！
vue 使用Jade模板写html,stylus写css的方法
11-30
日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。 安装包 // 安装jade包 npm install jade jade-loader --save-dev // 如果使用vue-cli构建项目，则不需要安装stylus相关的包，vue-cli默认已安装 npm install stylus stylus-loader --save-dev 配置文件 // webpack.base.conf.js 配置 // jade { test : /\.jade$/, loader
html+css+vue面试
wanghuohuo1998的博客
03-25 1211
v-model的实现，双向绑定的原理 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板..
HTML+CSS+VUE编写简易音乐播放器
weixin_46835329的博客
03-11 1297
HTML+CSS+VUE编写简易音乐播放器展示功能简析1.搜索功能2.音乐播放功能3.音乐图片&评论展示功能4.音乐进度条控制功能代码html+css基本布局js代码（vue.js+axios发送请求） 展示 PS：楼主是个刚刚入门的小白，学习过一丢丢html+css，最近在入门vue，跟着小破站视频模仿着制作了一个简易的音乐播放器，大伙多多指教，不喜勿喷。 功能简析 1.搜索功能 2.音乐播放功能 3.音乐图片&评论展示功能 4.音乐进度条控制功能 代码 html+css基本布局 js代码
vue.js+html+css+js实现电影墙3d炫酷特效
weixin_65270579的博客
04-06 806
【代码】vue.js+html+css+js实现电影墙3d炫酷特效。
html+CSS+js+VUE+element+java后台项目示例
08-20
包含html-CSS-javascript-vue-element等多项基础知识课件详解，为web开发提供基础技术。并包含一个web项目的示例代码，利于掌握Java后台和前端的程序设计流程。
Vue3.0中使用swiper完成视频墙滚动
m0_63153901的博客
08-02 665
Vue3.0制作视频轮播墙，这里使用的是swiper8版本。
前端面试题js，html，css，vue
12-28
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： 第一步： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化 第二步： compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 第三步： Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update() 方法 3、待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。 第四步：MVVM 作为数据绑定的入口，整合 Obs
vue+css+jsp高德地图API 开发的demo案例.zip
最新发布
05-27
vue+css+jsp高德地图API 开发的demo案例 vue+css+jsp高德地图API 开发的demo案例 vue+css+jsp高德地图API 开发的demo案例
vue.js+boostrap项目实践(案例详解)
11-23
一、为什么要写这篇文章 最近忙里偷闲学了一下vue.js，同时也复习了一下...2、需要有一定的HTML、CSS、JavaScript的基础知识 3、由于在项目中会加入一些juqery，所以还需要一定的基础，但是这个能看懂就行了 4、b
HTML+CSS+JS手机端购物车demo
10-18
HTML+CSS+JS手机端购物车demo,获取json数据实例，使用vue渲染列表，样式随便写的
vue-masonry-css-由CSS提供支持的Vue.js Masonry布局组件，无依赖关系。-Vue.js开发
05-27
专为Vue.js项目构建。 :smiling_face_with_sunglasses:为什么？ Ex由CSS提供支持的新砌体组件，可快速加载并且没有jQuery或其他依赖项。 专为Vue.js项目构建。 :smiling_face_with_sunglasses:为什么？ Vue包装的...
vue小白入门到精通之创建html页面儿
菜鸟猿-小毅的博客
05-07 1932
VUE小白之路创建html页面儿菜鸟方式引入vue的js 创建html页面儿 首先要知道一个完整的页面儿由html+css+js组成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
html5加css3加vue,css3加 vue制作DNA
weixin_39866874的博客
06-19 99
#app {position:relative;}.outer {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);text-align:center;overflow:hidden;width:90%;}.inner {position:rel...
HTML5期末考核大作业 基于HTML+CSS+JavaScript沪上美食(9页)
qq_38512570的博客
04-09 20
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
html里视频插件背景透明度,HTML5全屏背景视频与 CSS 和 JS（插件或库）
weixin_42148053的博客
06-10 877
前言：当网页载入时，自动播放的全屏背景视频已经成为当前颇受欢迎的趋势。 就个人而言，我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住，视频的故事必须与品牌相关。 近年来，我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能，因此我决定构建一个用到 HTML5 视频元素并且易于使用的基于JS的插件，这个插件常在...
使用vue和js做一个动态网页
05-16
好的，下面是一个基本的使用 Vue 和 JavaScript 构建动态网页的示例： 1. 首先，在你的 HTML 文件中引入 Vue 和你的 JavaScript 文件： ``` <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="your-script.js"></script> ``` 2. 创建一个 Vue 实例并绑定到你的 HTML 元素上： ``` <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 3. 在你的 JavaScript 文件中编写 Vue 逻辑： ``` var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { changeMessage: function () { this.message = 'New message!' } } }) ``` 4. 在你的 HTML 文件中使用 Vue 绑定和事件： ``` <div id="app"> {{ message }} <button v-on:click="changeMessage">Change message</button> </div> ``` 现在，当你点击 "Change message" 按钮时，会触发 `changeMessage` 方法，将 `message` 数据更新为 "New message!"，并且 HTML 中的 `{{ message }}` 会自动更新为新值。 这只是一个简单的示例，你可以使用 Vue 和 JavaScript 创建更复杂的动态网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值