一、
任务1：高亮显示鼠标选择的图片并使周围变暗
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("ul li").hover(
function(){
(this).siblings("li").removeClass("opacity_bg");
}
)
})
</script>
<style type="text/css">
ul {
margin: 0 auto;
padding: 0;
width: 400px;
font-size: 0;
zoom: 1;
}
ul li {
list-style-type: none;
float: left;
width: 125px;
height: 130px;
margin-right: 1px;
margin-bottom: 1px;
text-align: center;
display: table;
position: relative;
}
img {
border: none;
vertical-align: middle;
width: 125px;
height: 130px;
}
i {
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.opacity_bg {
background: #000;
opacity: 0.4;
}
</style>
</head>
<body>
<ul>
<li><a><img src="images/MyImage70.jpg" /></a><i>中华人民共和国</i></li>
<li><a><img src="images/MyImage71.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage72.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage73.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage74.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage75.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage76.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage77.jpg" /></a><i></i></li>
<li><a><img src="images/MyImage78.jpg" /></a><i></i></li>
</ul>
</body>
</html>
二、
任务2：高仿百度贴吧顶部不随滚动条滚动的特效
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
(function(){
(window).scrollTop()>=250){
(".nav").removeClass("fixedNav");
}
})
})
})
</script>
<style>
- {
margin: 0px;
padding: 0px;
}
div.nav {
background: #000000;
height: 57px;
line-height: 57px;
color: #ffffff;
text-align: center;
font-family: "微软雅黑", "黑体";
font-size: 30px;
}
div.fixedNav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 100000;
}
</style>
</head>
<body>
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content">
<div id="text" style="width:200px">
<img src="images/MyImage40.jpg" />
<img src="images/MyImage41.jpg" />
<img src="images/MyImage42.jpg" />
<img src="images/MyImage43.jpg" />
<img src="images/MyImage44.jpg" />
<img src="images/MyImage45.jpg" />
<img src="images/MyImage46.jpg" />
<img src="images/MyImage47.jpg" />
</div>
</div>
</body>
</html>
三、
任务3：实现动态显示图像和文字结合的星级评分
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("ul li").hover(
function(){
(".s_result").css("color","red");
var txt = (".s_result").html(txt);
},
function(){
(".s_result").css("color","#333");
("ul li").click(function(){
var txt = $(".s_result").html();
alert(txt);
})
})
</script>
<style>
- {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
.fl {
float: left;
display: inline;
}
.myBox {
width: 300px;
margin: 20px auto;
height: 30px;
position: relative;
text-align:center;
}
.s_name {
float: left;
display: block;
width: 60px;
padding-top: 4px;
text-align: right;
}
.star_ul {
background: url(images/my382star.png) no-repeat 0 -150px;
width: 132px;
z-index: 10;
position: relative;
height: 25px;
}
.star_ul li {
float: left;
margin-right: 1px;
width: 25px;
height: 25px;
}
.star_ul li a {
display: block;
height: 25px;
position: absolute;
left: 0;
top: 0;
text-indent: -999em;
}
.star_ul li .active-star {
background: url(images/my382star.png) no-repeat;
}
.star_ul li .one-star {
width: 25px;
background-position: 0 -120px;
z-index: 50;
}
.star_ul li .two-star {
width: 51px;
background-position: 0 -90px;
z-index: 40;
}
.star_ul li .three-star {
width: 79px;
background-position: 0 -60px;
z-index: 30;
}
.star_ul li .four-star {
width: 105px;
background-position: 0 -30px;
z-index: 20;
}
.star_ul li .five-star {
width: 129px;
margin-right: 0;
background-position: 0 0;
z-index: 10;
}
.s_result {
padding: 6px 0 0 5px;
}
</style>
</head>
<BODY>
<div class="myBox">
<span class="s_name">总体评价：</span>
<ul class="star_ul fl">
<li><a class="one-star" title="很差" href="#"></a></li>
<li><a class="two-star" title="差" href="#"></a></li>
<li><a class="three-star" title="还行" href="#"></a></li>
<li><a class="four-star" title="好" href="#"></a></li>
<li><a class="five-star" title="很好" href="#"></a></li>
</ul>
<span class="s_result fl">请打分</span>
</div>
</BODY>
</html>
