JS入门到精通 第21章 仿豆瓣电影网
导读：一、首页1. index.html 静态页：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>周星驰</title> &...
一、首页
1. index.html 静态页：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>周星驰</title> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <div id="nav"> <div><a href="index.html">豆瓣电影</a></div> <div> <ul> <li><a href="javascript:;">影讯 & 购票</a></li> <li><a href="javascript:;">选电影</a></li> <li><a href="javascript:;">电视剧</a></li> <li><a href="javascript:;">排行榜</a></li> <li><a href="javascript:;">分类</a></li> <li><a href="javascript:;">影评</a></li> <li><a href="javascript:;">2020年度榜单</a></li> </ul> </div> </div> <div id="main"> <div id="left"> <div> <div> <h2>正在热映</h2> <div> <span>1/3</span> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> <div> <div> <ul> <li> <a href="detail/mnyys.html"><img src="images/1.jpg" alt="" /></a> <p><a href="detail/mnyys.html">美女与野兽</a></p> <div> <span><span></span></span> <span>7.2</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/thwj.html"><img src="images/2.jpg" alt="" /></a> <p><a href="detail/thwj.html">头号玩家</a></p> <div> <span><span></span></span> <span>8.7</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" /></a> <p><a href="detail/fwhyj.html">飞屋环游记</a></p> <div> <span><span></span></span> <span>8.9</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/mtyj.html"><img src="images/4.jpg" alt="" /></a> <p><a href="detail/mtyj.html">摩天营救</a></p> <div> <span><span></span></span> <span>6.4</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" /></a> <p><a href="detail/yhhwd.html">银河护卫队</a></p> <div> <span><span></span></span> <span>8.0</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/crzdy2.html"><img src="images/6.jpg" alt="" /></a> <p><a href="detail/crzdy2.html">超人总动员2</a></p> <div> <span><span></span></span> <span>8.1</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/jqrzdy.html"><img src="images/7.jpg" alt="" /></a> <p><a href="detail/jqrzdy.html">机器人总动员</a></p> <div> <span><span></span></span> <span>9.3</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/jtmdt.html"><img src="images/8.jpg" alt="" /></a> <p><a href="detail/jtmdt.html">惊天魔盗团</a></p> <div> <span><span></span></span> <span>7.5</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/cmdsj.html"><img src="images/9.jpg" alt="" /></a> <p><a href="detail/cmdsj.html">楚门的世界</a></p> <div> <span><span></span></span> <span>9.2</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/dmkj.html"><img src="images/10.jpg" alt="" /></a> <p><a href="detail/dmkj.html">盗梦空间</a></p> <div> <span><span></span></span> <span>9.3</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/fkdwc.html"><img src="images/11.jpg" alt="" /></a> <p><a href="detail/fkdwc.html">疯狂动物城</a></p> <div> <span><span></span></span> <span>9.1</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/fczlm.html"><img src="images/12.jpg" alt="" /></a> <p><a href="detail/fczlm.html">复仇者联盟</a></p> <div> <span><span></span></span> <span>8.1</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/hxjy.html"><img src="images/13.jpg" alt="" /></a> <p><a href="detail/hxjy.html">火星救援</a></p> <div> <span><span></span></span> <span>8.4</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/jcs.html"><img src="images/14.jpg" alt="" /></a> <p><a href="detail/jcs.html">巨齿鲨</a></p> <div> <span><span></span></span> <span>5.9</span> </div> <a href="javascript:;">选座购票</a> </li> <li> <a href="detail/tqyj.html"><img src="images/15.jpg" alt="" /></a> <p><a href="detail/tqyj.html">通勤营救</a></p> <div> <span><span></span></span> <span>6.6</span> </div> <a href="javascript:;">选座购票</a> </li> </ul> </div> </div> </div> <div> <a href="javascript:;"><img src="images/banner1.jpg" /></a> <a href="javascript:;"><img src="images/banner2.jpg" /></a> </div> <div> <div> <h2>最近热门的电影</h2> <ul> <li><a>热门</a></li> <li><a>最新</a></li> </ul> </div> <div> <div> <ul> <li> <a href="detail/thwj.html"> <img src="images/2.jpg" alt="" /> </a> <p><a href="detail/thwj.html">头号玩家</a> <span>8.7</span></p> </li> <li> <a href="detail/fwhyj.html"> <img src="images/3.jpg" alt="" /> </a> <p><a href="detail/fwhyj.html">飞屋环游记</a> <span>8.9</span></p> </li> <li> <a href="detail/yhhwd.html"> <img src="images/5.jpg" alt="" /> </a> <p><a href="detail/yhhwd.html">银河护卫队</a> <span>8.0</span></p> </li> <li> <a href="detail/crzdy2.html"> <img src="images/6.jpg" alt="" /> </a> <p><a href="detail/crzdy2.html">超人总动员2</a> <span>8.1</span></p> </li> <li> <a href="detail/jtmdt.html"> <img src="images/8.jpg" alt="" /> </a> <p><a href="detail/jtmdt.html">惊天魔盗团</a> <span>7.5</span></p> </li> </ul> </div> <div> <ul> <li> <a href="detail/cmdsj.html"> <img src="images/9.jpg" alt="" /> </a> <p><a href="detail/cmdsj.html">楚门的世界</a> <span>9.2</span></p> </li> <li> <a href="detail/dmkj.html"> <img src="images/10.jpg" alt="" /> </a> <p><a href="detail/dmkj.html">盗梦空间</a> <span>9.3</span></p> </li> <li> <a href="detail/fkdwc.html"> <img src="images/11.jpg" alt="" /> </a> <p><a href="detail/fkdwc.html">疯狂动物城</a> <span>9.1</span></p> </li> <li> <a href="detail/fczlm.html"> <img src="images/12.jpg" alt="" /> </a> <p><a href="detail/fczlm.html">复仇者联盟</a> <span>8.1</span></p> </li> <li> <a href="detail/hxjy.html"> <img src="images/13.jpg" alt="" /> </a> <p><a href="detail/hxjy.html">火星救援</a> <span>8.4</span></p> </li> </ul> </div> </div> </div> </div> <div id="aside"> <div> <div><h2>一周口碑榜</h2></div> <div> <ul> <li><span>1</span> <span><a href="detail/fczlm.html">复仇者联盟</a></span> </li> <li><span>2</span> <span><a href="detail/thwj.html">头号玩家</a></span></li> <li><span>3</span><span><a href="detail/mnyys.html">美女与野兽</a></span></li> <li><span>4</span><span><a href="detail/yhhwd.html">银河护卫队</a></span></li> <li><span>5</span><span><a href="detail/dmkj.html">盗梦空间</a></span></li> <li><span>6</span><span><a href="detail/fwhyj.html">飞屋环游记</a></span></li> <li><span>7</span><span><a href="detail/hxjy.html">火星救援</a></span></li> <li><span>8</span><span><a href="detail/jqrzdy.html">机器人总动员</a></span></li> <li><span>9</span><span><a href="detail/cmdsj.html">楚门的世界</a></span></li> <li><span>10</span><span><a href="detail/fkdwc.html">疯狂动物城</a></span></li> </ul> </div> </div> <div> <div><h2>合作联系</h2></div> <div> <ul> <li>电影合作邮箱：movie@mr.com</li> <li>电视剧合作邮箱：tv@mr.com</li> </ul> </div> </div> </div> </div> <div style="clear:both"></div> <div id="bottom"> <span>@ 2001 - 2021 mingrisoft.com all rights reserved 吉林省明日科技有限公司</span> <span> <ul> <li>关于明日</li> <li>联系我们</li> <li>免责声明</li> <li>帮助中心</li> <li>移动应用</li> <li>明日广告</li> <li>合作共赢</li> </ul> </span> </div> </body> </html>
2. index.css ：
*{
margin: 0;
padding: 0;
}
a {text-decoration: none;}
ul{list-style: none;}
#nav{
width:100%;
height:120px;
background:#DBD8FE}
.nav-logo{
width:1200px;
height:80px;
line-height:80px;
margin:0 auto;
}
.nav-logo a{
font-size:36px;
color:#3399FF;
font-weight:bold;
font-family:"微软雅黑"}
.nav-items{
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
margin:0 auto;
}
.nav-items ul li{
float:left;
margin-right:40px;
font-family:"微软雅黑"}
.nav-items ul li a{color:#0080FF;}
#main{
width:1200px;
margin:40px auto;}
#left{
float:left;}
.is-on{width: 760px;}
.is-on .hd{border: solid 1px green}
.is-on .hd h2{
float: left;
width: 100px;
height:40px;
border: solid 1px #8CE8F0;
}
.is-on .hd .right{
float: right;
width: 100px;margin-top: 5px;
border: solid 1px #8CE8F0;
}
.is-on .hd .right span{
float: left;
margin-right: 10px;
font-family:"微软雅黑";
border: solid 1px #8CE8F0;
}
.is-on .hd .right a{
float: left;
width: 18px;
height: 18px;
background: url(../images/slide_swithc_2.png) no-repeat;
margin-right: 10px;
margin-top:2px;
border: solid 1px #769CDD;
}
.is-on .hd .right a.rightBtn{
background-position: -18px 0;
}
.is-on .bd{
clear: both;
border-top: 1px solid #ccc;
position: relative;
overflow: hidden;
width: 100%;
height: 330px;
margin-top:30px;
}
.is-on .bd .container{
position: absolute;
top: 0;
left: 0;
padding-top: 20px;
}
.is-on .bd .container ul{
width: 4000px;
}
.is-on .bd .container ul li{
float: left;
margin-right: 15px;
}
.is-on .bd .container ul li p{
text-align: center;
line-height: 20px;
padding-top: 20px;
font-family: "微软雅黑", "宋体";
color:#000000;
}
.is-on .bd .container ul li p a{
color:#000000;
}
.rating{ width:100px;height:20px;margin:8px auto;text-align:center}
.is-on .bd .container ul li span{
float: left;
}
.starrating{display:block;width:75px;height:20px;background: url('../images/starrating.gif') top left repeat-x;}
.star40{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:60px;height:20px;}
.star45{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:67px;height:20px;}
.star35{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:52px;height:20px;}
.star30{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:45px;height:20px;}
.is-on .bd .container ul li .score{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}
.is-on .bd .container ul li .goupiao{ clear:both;
display: block;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
background-color:#6699FF;
color:white;
border-radius: 4px;
margin: 0 auto;
}
.banner{margin-top:50px;}
.banner>a:not(:first-child){display:none;}
.hot-film{margin-top:10px;}
.hot-film-top{
height:40px;
line-height:40px;}
.hot-film-top h2{
float:left;}
.hot-film-top ul li{
float:left;
margin-left:20px;
}
.hot-film-top ul li a{cursor:pointer;font-family:"微软雅黑";color:#999999;height:20px;line-height:20px;}
.hot-film-top ul li a.active{color:#000000;}
.hot-film-top ul li a:not(.active):hover{
background:#6699FF;
color:#FFFFFF;
}
.hot-film-main{
clear:both;
width:760px;
border-top:1px solid #CCCCCC;
}
.hot-film-list,.new-film-list{
padding-top: 20px;
}
.hot-film-list ul li:not(:last-child),.new-film-list ul li:not(:last-child){
float: left;
margin-right: 15px;
}
.hot-film-list ul li p,.new-film-list ul li p{
text-align: center;
line-height: 20px;
padding-top: 20px;
font-family: "微软雅黑", "宋体";
}
.hot-film-list ul li p a,.new-film-list ul li p a{
color:#000000;
}
.hot-film-list ul li p span,.new-film-list ul li p span{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}
#aside{
float:right;
width:360px;
margin-left:80px;}
#aside .billboard .billboard-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}
#aside .billboard .billboard-content{
margin-top:3px;}
#aside .billboard .billboard-content ul li{
height:40px;
line-height:40px;
border-bottom:1px solid #CCCCCC;
font-family:"微软雅黑";
padding-left:10px;
}
#aside .billboard .billboard-content ul li .order{
font-size:10px;
margin-right:10px;}
#aside .billboard .billboard-content ul li .title a{color:#0080FF}
#aside .contact{margin-top:50px;}
#aside .contact .contact-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}
#aside .contact .contact-content{margin-top:20px;}
#aside .contact .contact-content ul li{
height:30px;
line-height:30px;
font-family:"微软雅黑";}
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}
#bottom .about{float:right;}
#bottom .about ul li{
float:left;
margin-left:20px;
font-size:14px;
color:#0080FF;
font-family:"微软雅黑";
}3. jquery代码：
<script type="text/javascript">
$(document).ready(function() {
var screenAmount = $(".container ul li").length / 5;//计算分屏数量
$(".container ul li:lt(5)").clone().appendTo(".container ul");//复制前5个元素
var nowScreen=0;
$(".rightBtn").click(function(){
if(nowScreen < screenAmount - 1){
nowScreen ++ ;//屏幕号加1
$(".container").animate({"left" : -775 * nowScreen} , 1500);//定义动画
}else{
nowScreen = 0;
$(".container").animate({"left" : -775 * screenAmount} , 1500 , function(){
$(this).css("left",0);//元素回到初始位置
});
}
$(".hd .right span").html(nowScreen + 1 + "/" + screenAmount);
});
$(".leftBtn").click(function(){
if(nowScreen > 0){
nowScreen -- ;//屏幕号减1
$(".container").animate({"left" : -775 * nowScreen} , 1500);//定义动画
}else{
nowScreen = screenAmount - 1;
$(".container").css("left" , -775 * screenAmount).animate({"left" : -775 * (screenAmount - 1)},1500);//移动到复制的5个元素并执行动画
}
$(".hd .right span").html(nowScreen + 1 + "/" + screenAmount);
});
var timer = setInterval(function(){$(".rightBtn").trigger("click")}, 5000);
$(".is-on").mouseenter(function() {
clearInterval(timer);
});
$(".is-on").mouseleave(function() {
timer = setInterval(function(){$(".rightBtn").trigger("click")}, 5000);
});
});
$(document).ready(function() {
var len = $(".banner").find("a");//获取广告图片
var pos = 0;//定义变量值为0
setInterval(function(){
len.eq(pos).hide();
pos++;//变量值加1
if(pos == len.length) pos=0;//变量值重新定义为0
len.eq(pos).show();//显示元素
},3000);//每隔3秒钟切换元素
});
$(document).ready(function() {
$(".hot-film-main div").hide();
$(".hot-film ul li a:first").addClass("active");
$(".hot-film-list").show();
$(".hot-film ul li a").click(function() {
$(this).addClass("active").parent().siblings().find("a").removeClass("active");
var index = $(this).parent().index();
$(".hot-film-main div").eq(index).show().siblings().hide();
});
});
</script>4.Tips
2026.7.17 先把静态页和css做出来，jQuery再一点点往上写。
2026.7.18 jQuery写完了，基本能懂。
二、详情页
cmdsj.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楚门的世界</title> <link rel="stylesheet" href="../css/score.css" /> <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="../js/score.js"></script> </head> <body> <div id="nav"> <div class="nav-logo"><a href="../index.html">豆瓣电影</a></div> <div class="nav-items"> <ul> <li><a href="javascript:;">影讯 & 购票</a></li> <li><a href="javascript:;">选电影</a></li> <li><a href="javascript:;">电视剧</a></li> <li><a href="javascript:;">排行榜</a></li> <li><a href="javascript:;">分类</a></li> <li><a href="javascript:;">影评</a></li> <li><a href="javascript:;">2020年度榜单</a></li> </ul> </div> </div> <div id="main"> <div id="left"> <h1> <span>楚门的世界 The Truman Show</span> <span>(1998)</span> </h1> <div class="subject"> <div class="mainpic"> <img src="../images/9.jpg" /> </div> <div class="info"> <span class='item'>导演</span>: 彼得·威尔<br/> <span class='item'>编剧</span>: 安德鲁·尼科尔<br/> <span class="actor"><span class='item'>主演</span>: 金·凯瑞 / 劳拉·琳妮 / 艾德·哈里斯 / 诺亚·艾默里奇 / 娜塔莎·麦克艾霍恩</span><br/> <span class="item">类型:</span> 剧情 / 科幻<br/> <span class="item">制片国家/地区:</span> 美国<br/> <span class="item">语言:</span> 英语<br/> <span class="item">上映日期:</span> 1998-06-05(美国)<br/> <span class="item">片长:</span> 103分钟<br/> <span class="item">又名:</span> 真人Show(港) / 真人戏 / 真人世界 / 楚门秀 / 真人秀<br/> <span class="item">IMDb链接:</span> tt0120382<br> </div> <div class="rating"> <div class="rating-logo">豆瓣评分</div> <div class="rating-level"> <span class="rating-score">9.2</span> <div class="rating-right"> <div> <span class="starrating"> <span class="star45"></span> </span> </div> <div class="rating-sum">613756人评价</div> </div> </div> <div class="star-count"> <div class="star-item"> <span class="stars" title="力荐">5星</span> <span class="bar" style="width:64px"></span> <span class="star-per">63.9%</span> </div> <div class="star-item"> <span class="stars" title="推荐">4星</span> <span class="bar" style="width:30px"></span> <span class="star-per">30.5%</span> </div> <div class="star-item"> <span class="stars" title="还行">3星</span> <span class="bar" style="width:5px"></span> <span class="star-per">5.2%</span> </div> <div class="star-item"> <span class="stars" title="较差">2星</span> <span class="bar" style="width:0px"></span> <span class="star-per">0.3%</span> </div> <div class="star-item"> <span class="stars" title="很差">1星</span> <span class="bar" style="width:0px"></span> <span class="star-per">0.1%</span> </div> </div> <div class="compare"> 好于 99% 剧情片<br /> 好于 99% 科幻片 </div> </div> </div> <div class="evaluation"> <div id="first"> <a class="wantto">想看</a> <a class="seen">看过</a> <div>评价: <span class="star"> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> </span> <span class="evaluation-word">1111</span> </div> </div> <div id="second" > 我想看这部电影 <span class="now-time"></span> <a class="del">删除</a><br /> <span class="show-tips"></span> </div> <div id="third" > 我看过这部电影 <span class="now-time">22222222</span> <a class="del">删除</a> <div class="show-evaluation" >我的评价: <span class="star"> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> </span> <span class="evaluation-word">33333</span> </div> </div> </div> <div class="intro"> <span class="title">楚门的世界的剧情简介 · · · · · ·</span> <div class="content"> 楚门（金·凯瑞 Jim Carrey 饰）是一个平凡得不能再平凡的人，除了一些有些稀奇的经历之外——初恋女友突然失踪、溺水身亡的父亲忽然似乎又出现在眼前，他和绝大多数30多岁的美国男人绝无异样。这令他倍感失落。他也曾试过离开自己生活了多年的地方，但总因种种理由而不能成行。 <br /> 直到有一天，他忽然发觉自己似乎一直在被人跟踪，无论他走到哪里，干什么事情。这种感觉愈来愈强烈。楚门决定不惜一切代价逃离这个他生活了30多年的地方，去寻找他的初恋女友。 <br /> 但他却发现自己怎样也逃不出去。真相其实很残忍。 </div> </div> <div class="also-like"> <span class="title">喜欢这部电影的人也喜欢 · · · · · ·</span> <div class="like-film-list"> <ul> <li> <a href="mtyj.html"><img src="../images/4.jpg" alt="" /></a> <p><a href="mtyj.html">摩天营救</a></p> </li> <li> <a href="yhhwd.html"><img src="../images/5.jpg" alt="" /></a> <p><a href="yhhwd.html">银河护卫队</a></p> </li> <li> <a href="dmkj.html"><img src="../images/10.jpg" alt="" /></a> <p><a href="dmkj.html">盗梦空间</a></p> </li> <li> <a href="fczlm.html"><img src="../images/12.jpg" alt="" /></a> <p><a href="fczlm.html">复仇者联盟</a></p> </li> <li> <a href="hxjy.html"><img src="../images/13.jpg" alt="" /></a> <p><a href="hxjy.html">火星救援</a></p> </li> </ul> </div> </div> </div> <div id="aside"> <div class="common-label"> <span class="title">豆瓣成员常用的标签 · · · · · ·</span> <div class="label-list"> <ul> <li>人性</li> <li>美国</li> <li>经典</li> <li>楚门的世界</li> <li>剧情</li> <li>美国电影</li> <li>喜剧</li> <li>JimCarrey</li> </ul> </div> </div> <div class="recommend"> <span class="title">以下豆列推荐 · · · · · ·</span> <div class="recommend-list"> <ul> <li> <a href="javascript:;">★豆瓣高分电影榜★ （上）9.7-8.6分</a> <span>(影志)</span> </li> <li> <a href="javascript:;">生命的律动</a> <span>(定一)</span> </li> <li> <a href="javascript:;">【容易忽视的好电影】</a> <span>(影志)</span> </li> <li> <a href="javascript:;">【豆瓣五星电影集中营】(1/3)</a> <span>(影志)</span> </li> <li> <a href="javascript:;">【内牛满面】</a> <span>(影志)</span> </li> </ul> </div> </div> <div class="who"> <span class="title">谁在看这部电影 · · · · · ·</span> <div class="number"> <a href="javascript:;">784675人看过</a> / <a href="javascript:;">130462人想看</a> </div> </div> </div> </div> <div style="clear:both"></div> <div id="bottom"> <span class="copyright">@ 2001 - 2021 mingrisoft.com all rights reserved 吉林省明日科技有限公司</span> <span class="about"> <ul> <li>关于明日</li> <li>联系我们</li> <li>免责声明</li> <li>帮助中心</li> <li>移动应用</li> <li>明日广告</li> <li>合作共赢</li> </ul> </span> </div> <div id="show-layer" > <div class="layer-bg"></div> <div class="layer-body"> <div class="layer-top"> <span class="title">添加收藏:我想看这部电影</span> <span class="x">x</span> </div> <div class="layer-middle"> <div id="wantto"> <span>标签(多个标签用空格分隔):</span> <input type="text" name="movietip" /> <div class="tip"> <span>常用标签:</span> <ul> <li>喜剧</li><li>剧情</li><li>美国</li><li>人性</li> <li>经典</li><li>人生</li><li>科幻</li><li>JimCarrey</li> </ul> </div> </div> <div id="seen"> <span>给个评价吧？(可选): </span> <span class="star"> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> <span><i class="bright"></i><i class="dark"></i></span> </span> <span class="evaluation-word">444444</span> </div> </div> <div class="layer-bottom"> <input type="button" value="保存" /> </div> </div> </div> </body> </html>
2.score.css
*{
margin: 0;
padding: 0;
}
body{
font-family:"微软雅黑"}
a {
text-decoration: none;
}
ul{
list-style: none;
}
#nav{
width:100%;
height:120px;
background:#DBD8FE}
.nav-logo{
width:1200px;
height:80px;
line-height:80px;
margin:0 auto;
}
.nav-logo a{
font-size:36px;
color:#3399FF;
font-weight:bold;
}
.nav-items{
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
margin:0 auto;
}
.nav-items ul li{
float:left;
margin-right:40px;
}
.nav-items ul li a{color:#0080FF;}
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}
#bottom .about{
float:right;
}
#bottom .about ul li{
float:left;
margin-left:20px;
font-size:14px;
color:#0080FF;
font-family:"微软雅黑";
}
#main{
width:1200px;
margin:20px auto;}
#left{float:left;}
#aside{
float:right;
width:360px;
margin-left:80px;}
#main #left h1{
height:80px;
line-height:80px;}
#main #left h1 .year{color:#999999}
#main #left .subject{width:760px;}
#main #left .subject .mainpic{float:left;}
#main #left .subject .info{
float:left;
width:360px;
margin-left:20px;
line-height:1.6em;
font-size:14px;}
#main #left .subject .info .item{color:#777777}
.subject .rating{
float:left;
width:200px;
margin-left:20px;
border-left:1px solid #BBBBBB;
padding-left:15px;
font-size:14px;}
.subject .rating .rating-logo{
color:#777777}
.subject .rating .rating-level{
margin-top:13px;}
.subject .rating .rating-level span{
float:left;
font-size:30px;}
.subject .rating .rating-level .rating-right{
float:left;
margin-left:16px;}
.subject .rating .star-count{
clear:both;
padding-top:16px;
padding-bottom:16px;
}
.subject .rating .star-count .star-item{
height:20px;
line-height:20px;
color:#777777;}
.subject .rating .star-count .star-item .stars{float:left;}
.subject .rating .star-count .star-item .bar{ display:block;
float:left;
margin:5px 6px 5px 12px;
height:10px;
background:orange;
opacity:0.8;}
.subject .rating .compare{
margin-top:20px;
border-top:1px solid #BBBBBB;
height:80px;
display:table-cell;
vertical-align:middle
}
.starrating{
display:block;
width:100px;
height:23px;
background: url('../images/starrating1.gif') top left repeat-x;}
.star45{
display:block;
width:90px;
height:23px;
background:url('../images/starrating1.gif') 0px -35px repeat-x;
}
.star40{
display:block;
width:80px;
height:23px;
background:url('../images/starrating1.gif') 0px -35px repeat-x;
}
.star35{
display:block;
width:70px;
height:23px;
background:url('../images/starrating1.gif') 0px -35px repeat-x;
}
.star30{
display:block;
width:60px;
height:23px;
background:url('../images/starrating1.gif') 0px -35px repeat-x;
}
#main #left .evaluation{
position:relative;
clear:both;
padding-top:40px;
font-size:14px}
#main #left .evaluation #first a{
float:left;
margin-right:12px;
display:block;
width:60px;
height:26px;
line-height:26px;
text-align:center;
background:#E0CDFA;
border:1px solid #AAAAAA;
border-radius:3px;
cursor:pointer}
.evaluation div{
height:26px;
line-height:26px;}
#first .star{
position:absolute;
top:42px;
font-size:0px;}
#first .star span{
position:relative;
display: inline-block;
width:20px;
height:20px;
overflow: hidden;
cursor: pointer;
}
#first .bright{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif') 0px -35px;}
#first .dark{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif');}
#first .evaluation-word{
position:absolute;
left:285px;}
.evaluation #second .now-time,.evaluation #third .now-time{
margin-left:10px;
color:#777777}
.evaluation #second a,.evaluation #third a{
margin-left:30px;
color:#777777;
cursor:pointer;}
.evaluation #second a:hover,.evaluation #third a:hover{
background:#CCCCCC;
}
.show-evaluation{position:relative;}
#third .star{
position:absolute;
top:2px;
font-size:0px;}
#third .star span{
position:relative;
display: inline-block;
width:20px;
height:20px;
overflow: hidden;
cursor: pointer;
}
#third .bright{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif') 0px -35px;}
#third .dark{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif');}
#third .evaluation-word{
position:absolute;
left:165px;}
.intro{
clear:both;
margin-top:30px;
width:760px;
}
.title{
height:50px;
line-height:50px;
color:#339966;
font-size:18px}
.content{
font-size:14px;
line-height:1.6em}
.also-like{
margin-top:10px;
width:760px;
}
.like-film-list ul li:not(:last-child){
float:left;
margin-right:15px;}
.like-film-list ul li p{
margin:8px auto;
text-align:center;
}
.like-film-list ul li p a{
color:#0080FF;}
#aside .common-label{margin-top:60px;}
#aside .common-label ul li{
float:left;
margin-top:10px;
padding:2px 8px;
background:#DDDDFF;
color:#0080FF;
cursor:pointer;
font-size:14px;
margin-right:8px;}
#aside .common-label ul li:hover{background:#CACDFF}
#aside .recommend{
clear:both;
padding-top:30px;
}
#aside .recommend .recommend-list ul li{
height:40px;
line-height:40px;
border-top:1px dashed #999999;
}
#aside .recommend .recommend-list ul li a{
font-size:14px;
color:#0080FF;}
#aside .recommend .recommend-list ul li span{
font-size:14px;
color:#666666;}
#aside .recommend .recommend-list ul li:last-child{
border-bottom:1px dashed #999999;
}
#aside .who{
margin-top:30px;}
#aside .who .number a{
font-size:14px;
color:#0080FF;}
#aside .who .number a:hover{
background:#0033FF;
color:#FFFFFF}
#show-layer{
position:absolute;}
#show-layer .layer-bg{
position:absolute;
width:500px;
height:200px;
background:#999999;
opacity:0.5;
border-radius:6px;
z-index:5;
}
#show-layer .layer-body{
position:absolute;
z-index:10;
background:#FFFFFF;
margin:10px;
width:480px;
height:180px;
font-size:14px}
#show-layer .layer-body .layer-top{
height:50px;
line-height:50px;
background:#D8CEFF;
color:#339966;
padding-left:20px;
font-size:18px
}
#show-layer .layer-body .layer-top .x{ float:right;
color:#666666;
cursor:pointer;
margin-right:26px;
}
#show-layer .layer-body .layer-top .x:hover{color:#FF0000;}
#show-layer .layer-body .layer-middle{
margin-top:15px;
margin-left:20px;
}
#show-layer .layer-body .layer-middle .tip{margin-top:15px;}
#show-layer .layer-body .layer-middle .tip span{
float:left;}
#show-layer .layer-body .layer-middle div ul li{
float:left;
margin-left:12px;
color:#339966;
padding:2px;
background:#DDF5FF;
border:1px solid #999999;
font-size:13px;
cursor:pointer}
#show-layer .layer-body .layer-middle div ul li.active{
color:#AAAAAA}
#show-layer .layer-body .layer-middle div ul li:hover{
background:#66CC00;
color:#FFFFFF}
#show-layer .layer-body .layer-bottom{
clear:both;
width:100%;
height:40px;
line-height:40px;
background:#D8CEFF;
position:absolute;
bottom:0}
#show-layer .layer-body .layer-bottom input{
width:60px;
height:30px;
line-height:30px;
font-size:14px;
font-family:"微软雅黑";
float:right;
margin-top:9px;
margin-right:20px;
cursor:pointer}
#seen{
position:relative;}
#seen .star{
position:absolute;
font-size:0px;}
#seen .star span{
position:relative;
display: inline-block;
width:20px;
height:20px;
overflow: hidden;
cursor: pointer;
}
#seen .bright{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif') 0px -35px;}
#seen .dark{
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url('../images/starrating1.gif');}
#seen .evaluation-word{
position:absolute;
left:235px;}3.score.js
function setLayerCenter(){
var top = ($(window).height()-$(".layer-bg").height())/2;//设置元素距浏览器顶部距离
var left = ($(window).width()-$(".layer-bg").width())/2;//设置元素距浏览器左侧距离
var scrolltop = $(window).scrollTop();//获取垂直滚动条位置
var scrollleft = $(window).scrollLeft();//获取水平滚动条位置
//设置弹出层位置
$("#show-layer").css({"top":top+scrolltop,"left":left+scrollleft}).show();
}
function getEvaluationWord(name,index){
switch(index){
case 1:
$(name).find(".evaluation-word").text("很差");//定义一星评价词
break;
case 2:
$(name).find(".evaluation-word").text("较差");//定义二星评价词
break;
case 3:
$(name).find(".evaluation-word").text("还行");//定义三星评价词
break;
case 4:
$(name).find(".evaluation-word").text("推荐");//定义四星评价词
break;
case 5:
$(name).find(".evaluation-word").text("力荐");//定义五星评价词
break;
default:
$(name).find(".evaluation-word").text("");//评价词设置为空
break;
}
}
$(document).ready(function(){
var flag = 1,tips = "";
$("#first .wantto").click(function(){
flag = 1;
setLayerCenter();//设置弹出层居中
$(window).on("scroll resize",function(){setLayerCenter();});//添加事件处理程序
$("#seen").hide();//隐藏元素
$("#show-layer .title").html("添加收藏:我想看这部电影");//设置弹出层标题
$("#wantto").show();//显示元素
$("input[name='movietip']").val("");//设置电影标签为空
$(".tip li").removeClass("active");//移除标签样式
});
$("#show-layer .x").click(function(){
$("#show-layer").hide();//隐藏弹出层
$(window).off();//移除事件处理程序
});
$(".tip li").click(function(){
if(!$(this).hasClass("active")){//如果当前标签不具有该样式
$(this).addClass("active");//为当前标签添加样式
tips = $("input[name='movietip']").val();//获取文本框中的电影标签
tips += $(this).text()+" ";//当前标签后添加空格
$("input[name='movietip']").focus();//文本框获得焦点
$("input[name='movietip']").val(tips);//显示电影标签
}else{
$(this).removeClass("active");//移除当前标签样式
var t = $(this).text()+" ";//当前标签后添加空格
tips = $("input[name='movietip']").val().replace(t,"");//删除选择的标签
$("input[name='movietip']").focus();//文本框获得焦点
$("input[name='movietip']").val(tips);//显示电影标签
}
});
$(".layer-bottom input").click(function(){
if(flag == 1){
$("#show-layer").hide();//隐藏弹出层
$(window).off();//移除事件处理程序
$("#first").hide();//隐藏元素
$("#second").show();//显示元素
if(tips != "")
$(".show-tips").text("标签:"+tips);//设置文本内容
}else{
$("#show-layer").hide();//隐藏弹出层
$(window).off();//移除事件处理程序
$("#first").hide();//隐藏元素
$("#third").show();//显示元素
$(".show-evaluation").show();//显示评价词
//所有星星变暗
$(".show-evaluation .star span").find(".bright").css("z-index",0);
//根据星级数目使星星变亮
$(".show-evaluation .star span:lt("+star_level+")").find(".bright").css("z-index",1);
getEvaluationWord(".show-evaluation",star_level);//输出评价词
$(".show-evaluation .star span").mouseover(function(){
$(this).prevAll().find(".bright").css("z-index",1);//前面的星星变亮
$(this).find(".bright").css("z-index",1);//当前星星变亮
$(this).nextAll().find(".bright").css("z-index",0);//后面的星星变暗
var index = $(this).index()+1;//当前索引加1
getEvaluationWord(".show-evaluation",index);//输出评价词
});
$(".show-evaluation .star").mouseout(function(){
$(this).find(".bright").css("z-index",0);//所有星星变暗
$(this).next().text("");//评价词设置为空
//根据星级数目使星星变亮
$(".show-evaluation .star span:lt("+star_level+")").find(".bright").css("z-index",1);
getEvaluationWord(".show-evaluation",star_level);//输出评价词
});
$(".show-evaluation .star span").click(function(){
star_level = $(this).index()+1;//获取评价的星级
});
}
var nowdate = new Date();//定义日期对象
var year = nowdate.getFullYear();//获取当前年份
var month = nowdate.getMonth()+1;//获取当前月份
var date = nowdate.getDate();//获取当前日期
$(".now-time").html(year+"-"+month+"-"+date);//输出年月日
});
var star_level = 0;//定义表示星级的变量
$("#first .star span").mouseover(function(){
$(this).prevAll().find(".bright").css("z-index",1);//前面的星星变亮
$(this).find(".bright").css("z-index",1);//当前星星变亮
$(this).nextAll().find(".bright").css("z-index",0);//后面的星星变暗
var index = $(this).index()+1;//当前索引加1
getEvaluationWord("#first",index);//输出评价词
});
$("#first .star").mouseout(function(){
$(this).find(".bright").css("z-index",0);//所有星星变暗
$(this).next().text("");//评价词设置为空
});
$("#first .star span").click(function(){
flag = 2;
setLayerCenter();//设置弹出层居中
$(window).on("scroll resize",function(){setLayerCenter();});//添加事件处理程序
$("#wantto").hide();//隐藏元素
$("#seen").show();//显示元素
$("#show-layer .title").html("添加收藏:我看过这部电影");//设置弹出层标题
$("#seen .star span").find(".bright").css("z-index",0);//所有星星变暗
star_level = $(this).index()+1;//获取评价的星级
//根据星级数目使星星变亮
$("#seen .star span:lt("+star_level+")").find(".bright").css("z-index",1);
getEvaluationWord("#seen",star_level);//输出评价词
});
$("#seen .star span").mouseover(function(){
$(this).prevAll().find(".bright").css("z-index",1);//前面的星星变亮
$(this).find(".bright").css("z-index",1);//当前星星变亮
$(this).nextAll().find(".bright").css("z-index",0);//后面的星星变暗
var index = $(this).index()+1;//当前索引加1
getEvaluationWord("#seen",index);//输出评价词
});
$("#seen .star").mouseout(function(){
$(this).find(".bright").css("z-index",0);//所有星星变暗
$(this).next().text("");//评价词设置为空
//根据星级数目使星星变亮
$("#seen .star span:lt("+star_level+")").find(".bright").css("z-index",1);
getEvaluationWord("#seen",star_level);//输出评价词
});
$("#seen .star span").click(function(){
star_level = $(this).index()+1;//获取评价的星级
});
$("#first .seen").click(function(){
flag = 2;
setLayerCenter();//设置弹出层居中
$(window).on("scroll resize",function(){setLayerCenter();});//添加事件处理程序
$("#wantto").hide();//隐藏元素
$("#seen").show();//显示元素
$("#show-layer .title").html("添加收藏:我看过这部电影");//设置弹出层标题
star_level = 0;//重置变量
$("#seen .star span").find(".bright").css("z-index",0);//所有星星变暗
$("#seen .evaluation-word").text("");//评价词设置为空
});
$("#second .del,#third .del").click(function(){
if(window.confirm("真的要删除这个收藏？")){
tips = "";//变量设置为空
$(".show-tips").text("");//电影标签设置为空
$("#first").show();//显示元素
$("#second").hide();//隐藏元素
$("#third").hide();//隐藏元素
}
});
});4.Tips
复制源代码怎么会丢失类名？
也就2天。
星星显示搞懂了。
熟悉样式比较费劲。
$(window).height，$(window).scrollTop
$(name).find(".evalueation-word").text("推荐")
三、项目地址
https://www.xinyizhishu.top/jsC/sc/21/