abstrak：<!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>優(yōu)酷-這世界很酷</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>
<!--頂部滾動圖片區(qū)域-->
<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>吳彼失利不服氣竟暴力發(fā)泄</a>
<a href=""><span>青春斗：</span>向真變頹廢</a>
<a href=""><span>只為遇見你：</span>與之高潔舉辦浪漫二人婚禮</a>
<a href=""><span>喜劇之人頂配版：</span>吳彼失利不服氣竟暴力發(fā)泄</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>搜全網(wǎng)</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>
Guru membetulkan：西門大官人Masa pembetulan：2019-03-29 09:42:15
Rumusan guru：程序寫的很好，這樣的效果還可以結合css3+jquery來完成，感興趣的話可以了解下