其他分享
首页 > 其他分享> > 简单的电影页面

简单的电影页面

作者:互联网


                                                                 
源代码:

  1. <body>
  2. <div class="diankuan">
  3.    <h2 class="niekuan">电影排行榜</h2>
  4.       <ul id="list">
  5.        </ul>
  6.    
  7. </div>
  8. <script src="js/电影.js"></script>
  9. </body>

2.css样式

    *{

    margin: 0;

    padding: 0;

}

.diankuan{

    width: 600px;

   

    border: 1px solid #FB07E9;

    margin: 30px auto 0;

}

 .niekuan{

    padding: 10px;

    color: #F8BFBF;

    /*width: 600px;

   height: 52px;

    color: #FC007F;

    font-size: 27px;

    margin: 12px auto 0;

    text-indent: 20px;该属性可以方便地实现文本缩进*/

}

ul>li{

    list-style: none;

    padding: 5px 10px;

    border: 1px dashed #ccc;

    font-size: 18px;

    overflow: hidden;

}

ul li>span{

    font-size: 24px;

    font-style: italic;

    margin-right: 10px;

}

.red{

    color: #E62326;

}

.content{

    height: 0px;

    padding-top: 10px;

   

}

.content div{

    width: 40%;

    height: 140px;

    float: left;

}

.content img{

    width: 230px;

    height: 140px;

}

.content p{

    width: 56%;

    font-size: 12px;

    padding: 4px 10px;

    float: left;

}

       

3.Js代码

var movieList=[

    {

        number:1,

        movieName:"狙击手",

        imgsrc:"images/m1.jpg",

        introduce:"地处东非资源富饶的萨基亚,是21世纪初非洲大陆屈指可数的增长经济体。因为政治利益,3年前的总统大选结果遭到军方否认,国家陷入了战争的深渊。 萨基亚被由总统的秩序军和军阀的自由军一分为二。常年的战争使得人民的生活陷入水深火热之中,滥用的生化武器让原本肥沃的土地变得贫瘠。 战争也带来了外国军队、恐怖分子、军火公司、私人武装……这里变成了角逐利益与生死的竞技场。"

    },

    {

        number:2,

            movieName:"叶问4:完结篇",

            imgsrc:"images/m2.jpg",

            introduce:"因故来到美国唐人街的叶问,意外卷入一场当地军方势力与华人武馆的纠纷,面对日益猖狂的民族歧视与压迫,叶问挺身而出,在美国海军陆战队军营拼死一战,以正宗咏春,向世界证明了中国功夫。"

    },

    {

       number:3,

        movieName:"肥龙过江",

        imgsrc:"images/m3.jpg",

        introduce:"港警察朱福龙(甄子丹 饰)因一次工作失误惨被降级,万般无奈之际又遭未婚妻可儿(周励淇 饰)悔婚,事业爱情的双重打击令他一蹶不振,暴饮暴食六个月后体重猛增到200斤!上司黄警官不忍其继续堕落,委派朱福龙前往日本押送一名犯人,并承诺只要完成任务就可以为他恢复职位。可惜来到日本,倒霉的事件便接连在他身上发生,不仅财物尽失,连犯人也在押送途中逃脱了。幸好得到前香港警察潇洒哥(王晶 饰)的帮助才得以暂时解困,为了完成任务找回犯人,朱福龙与潇洒哥共同行动,不料在查找真相的过程中发现了日本黑帮的惊天阴谋......"

    },

    {

        number:4,

        movieName:"哪吒之魔童降世",

        imgsrc:"images/m4.jpg",

        introduce:"天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错,灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临,哪吒是否命中注定会立地成魔?他将何去何从?"

    },

    {

    number:5,

        movieName:"汉时关",

        imgsrc:"images/m5.jpg",

        introduce:"东汉末年,忠良之后刘契为避乱世,在大漠之中守护着一座破败的关隘——汉时关,并且宣称汉时关是一个乱世之中的“避难所”,凡是进来的人,都能保证他的安全。各种势力聚集于此达到了一种奇异的平衡。 直到某天为求援军的汉军将领耿忠的到来,打破了这个江湖规矩,从此刘契被一系列事件推着做出关于死亡,亲情,友情,爱情,家国等一系列抉择。当刘契最后披上父亲传承给他的甲胄,带着极少的人和大胡军队奋勇拼杀的时候,完成了侠之大者为国为民的灵魂觉醒!"

    },

   

    {

        number:6,

        movieName:"捉仙记",

        imgsrc:"images/m6.jpg",

        introduce:"天意是天界出了名的留级生,因为前世孽缘未了始终无法成仙,只能在仙书阁做一名小仙童,一次无意释放了被囚的雪妖,天意下凡捉妖失去法力,以凡人身份与雪妖周旋,无意却产生了感情。天意得知自己前世犯错导致了雪女成妖,自愿在黄泉路上徘徊千年,最终雪妖为救回天意牺牲了自己。"

    },

    {

    number:7,

        movieName:"大漠江湖",

        imgsrc:"images/m7.jpg",

        introduce:"心怀江湖梦的小铁匠吕三思偶遇自己崇拜的大侠百里无忧,替大侠押送西厂女鹰犬何青缨,可何青缨却说出另一个版本,她其实是受西厂迫害的义士,那百里无忧才是出卖义士的走狗!疑点越来越多,孰是孰非需要吕三思做出判断。女鹰犬可能不是鹰犬,而大侠可能也不是大侠,忠奸难辨,从未涉足江湖的吕三思发现,这个江湖与自己想象的全然不同。"

    }

];

window.οnlοad=function(){

    creatLi();

    var lis=document.getElementById("list").getElementsByTagName("li");/*getElementsByTagName方法可返回带有指定标签名的对象的集合*/

//  console.log(typeof lis);

//  console.log(lis);

    for(var i=0;i<lis.length;i++){

        lis[i].οnmοuseοver=function(){

//          console.log(this);

            this.querySelector(".content").style.display="block";

        };

        lis[i].οnmοuseοut=function(){

            this.querySelector(".content").style.display="none";

        }

    }

}

function creatLi(){

    var li=null;

    var list=document.getElementById("list");

    console.log(typeof movieList);

    for(var i in movieList){

        li=document.createElement("li");

        li.innerHTML='<span class="red">'+movieList[i].number+'</span>'+movieList[i].movieName+'<div class="content"><div><img src="'+movieList[i].imgsrc+'" alt=""></div><p>简介:'+movieList[i].introduce+'</p></div>';

        list.appendChild(li);

    }

    li=null;

    //for in...

}

标签:imgsrc,电影,number,introduce,li,jpg,简单,movieName,页面
来源: https://blog.csdn.net/qq_56644849/article/details/118002720