關於利用jQuery實現愛奇藝裡面的滑鼠移入改變當前頁面的功能的實現原理

Lurkers.發表於2018-06-28
jQuery

效果如圖：




程式碼如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: yellowgreen
			}
			.main{
				width: 1310px;
				height: 520px;
				position: relative;
				margin: 50px auto;
			}
			.main ul{
				width: 1310px;
			}
			.main ul li img{
				width: 1310px;
				margin: 0 auto;
				height: 520px;
				border-radius: 4px;
			}
			.main .main_bar{
				position: absolute;
				top: 30px;
				left: 990px;
				width: 276px;
				background: rgba(0,0,0,0.5);
				border-radius: 4px;
			}
			.main_bar li{
				padding: 11px 20px;
				font-size: 16px;
				cursor: pointer;
			}
			.main_bar li .show{
				background: white;
				width: 190px;
				padding: 10px 15px;
				border-radius: 5px;
				display: none;
			}
			.main_bar li .show .title{
				font-size: 20px;
				color: deepskyblue;
			}
			.main_bar li .show .txt{
				color:burlywood;
			}
			.main_bar li.active a{
				display: none;
			}
			.main_bar li.active .show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<ul>
				<li>
					<a href="#"><img src="img/1.jpg" id="img"</a>
				</li>
			</ul>
			<div class="main_bar">
				<ul>
					<li class="active">
						<a href="#"> 戰狼1  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼1</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
					<li>
						<a href="#"> 戰狼2  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼2</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
					<li>
						<a href="#"> 戰狼3  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼3</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
					<li>
						<a href="#"> 戰狼4  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼4</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
					<li>
						<a href="#"> 戰狼5  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼5</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
					<li>
						<a href="#"> 戰狼6  吳京的愛國情懷</a>
						<div class="show">
							<div class="title">戰狼6</div>
							<div class="txt">吳京的愛國情懷</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		
		<script>
			$(function(){
				$(".main_bar ul li").attr("pic",function(index){
					return "img/"+(index+1)+".jpg"
				})
				$(".main_bar ul li").mouseover(function(){
					var pic=$(this).attr("pic")
					$(this).addClass("active").siblings("li").removeClass("active")
					$("#img").attr("src",pic)
					
				})
				
			})
		</script>
	</body>
</html>

相關文章