电影排行榜

最新推荐文章于 2022-10-17 20:31:54 发布

yanjin_xiaoxiao

最新推荐文章于 2022-10-17 20:31:54 发布

阅读量214

点赞数 1

文章标签： javascript html jquery

本文链接：https://blog.youkuaiyun.com/yanjin_xiaoxiao/article/details/121643960

版权

该博客展示了如何使用HTML、CSS和JavaScript创建一个电影排行榜页面，包括页面结构、样式设计和交互功能。内容涵盖电影名称、排名、简介，以及鼠标悬停时显示电影图片和详细介绍的动态效果。通过示例代码，读者可以学习到前端开发的基本技巧和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面样式

<!doctype html>

<html>

<head>

<title>电影排行榜</title>

<linkrel="stylesheet" href="./stylem.css">

</head>

<body>

<divclass="container">

<h2class="title">电影排行榜</h2>

<ulid="list"></ul>

</div>

<scriptsrc="./scriptm.js"></script>

</body>

</html>

2.css样式

@charset "utf-8";

/* CSS Document */

margin: 0px;

padding: 0px;

}

.container{

width: 700px;

margin: 30px auto 0px;

border: 1px solid#ccc;

}

.title{

padding: 10px;

color: #F8BFBF;

}

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{

padding-top: 10px;

display: none;

}

.content div{

width: 40%;

height: 140px;

float: left;

}

.content img{

width: 100%;

height: 100%;

}

.content p{

width: 56%;

font-size: 12px;

padding: 4px 10px;

float: left;

}

3.js样式

// JavaScript Document

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.onload = function(){

creatLi();

var lis =document.getElementById("list").getElementsByTagName("li");

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

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

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(typeofmovieList);

for(var i inmovieList){

li =document.createElement("li");

li.innerHTML='<span>'+movieList[i].number+'</span>'+movieList[i].movieName+'<divclass="content"><div><imgsrc="'+movieList[i].imgsrc+'"alt=""></div><p>'+movieList[i].introduce+'</p></div>';

list.appendChild(li);

}

li = null;

}

效果：