关于利用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>
关于利用jQuery实现爱奇艺里面的鼠标移入改变当前页面的功能的实现原理

猜你喜欢
