简单的电影页面
作者：互联网
源代码：
- <body>
- <div class="diankuan">
- <h2 class="niekuan">电影排行榜</h2>
- <ul id="list">
- </ul>
- </div>
- <script src="js/电影.js"></script>
- </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