标签：imgsrc 电影 number introduce li jpg 简单 movieName 页面
源代码：
- <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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。