摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="2.png">
<link rel="stylesheet" href="static/css/youku.css">
<link rel="stylesheet" type="text/css" href="static\font-awesome-4.7.0\css\font-awesome.min.css">
<script type="text/javascript" src="static/jQuery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 鼠标移上第一个导航切换图片
$('a:eq(0)').mouseover(function () {
$('.header').css('background','#9D3738');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-14/aaf22e5b4029f28775652aeb3ea15b9a.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1twMilOqAXuNjy1XdXXaYcVXa-1664-520.png")');
$('span:eq(0)').text('学习强国');
});
//鼠标离开第一个导航恢复：的显示
$('a:eq(0)').mouseleave(function () {
$('span:eq(0)').text('学习强国：');
});
$('a:eq(1)').mouseover(function () {
$('.header').css('background','#DBECCE');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-28/62d8726143497f6b8bbbe8d81a57cd8f.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1vbxYocrI8KJjy0FhXXbfnpXa-1664-520.png")');
$('span:eq(1)').text('青春斗');
});
$('a:eq(1)').mouseleave(function () {
$('span:eq(1)').text('青春斗：');
});
$('a:eq(2)').mouseover(function () {
$('.header').css('background','#F6E2D3');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-27/6167b8c6c87edd00bdb03773c85918d6.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1ALbtocLJ8KJjy0FnXXcFDpXa-1664-520.png")');
$('span:eq(2)').text('只为遇见你');
});
$('a:eq(2)').mouseleave(function () {
$('span:eq(2)').text('只为遇见你：');
});
$('a:eq(3)').mouseover(function () {
$('.header').css('background','#072439');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-28/4c3ba007daaaa413dfce8ece5ce6645e.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1ITiZonvI8KJjSspjXXcgjXXa-1664-520.png")');
$('span:eq(3)').text('喜剧之人顶配版');
});
$('a:eq(3)').mouseleave(function () {
$('span:eq(3)').text('喜剧之人顶配版：');
});
$('a:eq(4)').mouseover(function () {
$('.header').css('background','#DBECCE');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-28/62d8726143497f6b8bbbe8d81a57cd8f.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1vbxYocrI8KJjy0FhXXbfnpXa-1664-520.png")');
$('span:eq(4)').text('青春斗');
});
$('a:eq(4)').mouseleave(function () {
$('span:eq(4)').text('青春斗：');
});
$('a:eq(5)').mouseover(function () {
$('.header').css('background','#F6E2D3');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-27/6167b8c6c87edd00bdb03773c85918d6.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1ALbtocLJ8KJjy0FnXXcFDpXa-1664-520.png")');
$('span:eq(5)').text('只为遇见你');
});
$('a:eq(5)').mouseleave(function () {
$('span:eq(5)').text('只为遇见你：');
});
$('a:eq(6)').mouseover(function () {
$('.header').css('background','#072439');
$('.pic_show').css('background','url("http://ykimg.alicdn.com/develop/image/2019-03-28/4c3ba007daaaa413dfce8ece5ce6645e.jpg")');
$('.pic_bg').css('background','url("http://gw.alicdn.com/mt/TB1ITiZonvI8KJjSspjXXcgjXXa-1664-520.png")');
$('span:eq(6)').text('喜剧之人顶配版');
});
$('a:eq(6)').mouseleave(function () {
$('span:eq(6)').text('喜剧之人顶配版：');
});
});
</script>
</head>
<body>
<!--顶部滚动图片区域-->
<div class="header">
<!--滚动图片-->
<div class="pic_show">
<div class="pic_bg"></div>
<div class="right_tab">
<a href=""><span>学习强国：</span>十三届全国人大二次会议</a>
<a href=""><span>青春斗：</span>向真变颓废</a>
<a href=""><span>只为遇见你：</span>与之高洁举办浪漫二人婚礼</a>
<a href=""><span>喜剧之人顶配版：</span>吴彼失利不服气竟暴力发泄</a>
<a href=""><span>青春斗：</span>向真变颓废</a>
<a href=""><span>只为遇见你：</span>与之高洁举办浪漫二人婚礼</a>
<a href=""><span>喜剧之人顶配版：</span>吴彼失利不服气竟暴力发泄</a>
</div>
</div>
<!--固定在顶部的导航栏-->
<div class="top_tab">
<div class="logo float">
<a class="logo_img" href=""><img src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png" alt=""></a>
<form class="logo_form" action="">
<input type="text">
<button>搜全网</button>
</form>
<div class="clear"></div>
</div>
<!--右侧导航栏-->
<ul class="float_r tab_ul">
<li class="float tab_li"><i class="fa fa-bank" style="color: #c4a25a"></i><br><a href="" style="color: #c4a25a">VIP</a></li>
<li class="float tab_li"><i class="fa fa-feed"></i><br><a href="">订阅</a></li>
<li class="float tab_li"><i class="fa fa-clock-o"></i><br><a href="">记录</a></li>
<li class="float tab_li"><i class="fa fa-arrow-up"></i><br><a href="">上传</a></li>
<li class="float tab_li"><i class="fa fa-television"></i><br><a href="">客户端</a></li>
<li class="float pos_rel"><a href=""><img class="login" src="http://img5.duitang.com/uploads/item/201409/23/20140923094045_BNYji.thumb.700_0.png"></a>
<!--登录头像的下拉框-->
<div class="ul_box">
<span class="arrow"></span>
<p>登录使用更多功能</p>
<button>登录/注册</button>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
批改老师：西门大官人批改时间：2019-03-29 09:42:15
老师总结：程序写的很好，这样的效果还可以结合css3+jquery来完成，感兴趣的话可以了解下
