鼠标点击展开详情

发布时间：2023年12月17日

网页部分：

HTML部分：

<body>
		<br>
		<div id="nav">
			<div id="dang"></div>
			<ul id="aaa">
				<li class="a1"><img src="img/U011.jpg" width="195" height="295">
					<div class="aaays">NO1.黄忠</div>
				</li>
				<li class="a2"><img src="img/U022.jpg" width="195" height="295">
					<div class="aaays">NO2.刘备</div>
				</li>
				<li class="a3"><img src="img/U033.jpg" width="195" height="295">
					<div class="aaays">NO3.程普</div>
				</li>
				<li class="a4"><img src="img/U044.jpg" width="195" height="295">
					<div class="aaays">NO4.吴凤熙</div>
				</li>
				<li class="a5"><img src="img/U055.jpg" width="195" height="295">
					<div class="aaays">NO5.马云禄</div>
				</li>
				<li class="a6"><img src="img/U066.jpg" width="195" height="295">
					<div class="aaays">NO6.姜维</div>
				</li>
			</ul>
			<div id="name">
				<div class="nr">
					黄忠
					<div class="ys"> （？－220年）
						<p>字汉升 南阳（今河南南阳）人。东汉末年名将。本为刘表部下中郎将，后归刘备，并助刘备攻益州刘璋。公元219年，黄忠在定军山一战中阵斩曹操部下名将夏侯渊，升任征西将军，刘备称汉中王后改封后将军，赐关内侯。次年，黄忠病逝，谥曰刚侯。黄忠在后世多以勇猛的老将形象出现于各类文学艺术作品中，《三国演义》里，刘备称汉中王后将其封为五虎上将之一，而黄忠的名字在中国也逐渐成为了老当益壮的代名词。</p>
					</div>
				</div>
				<div class="nr">
					人皇*刘备
					<div class="ys">（142年－208年）
						<p>字景升，山阳郡高平（今山东微山[1] ）人。汉鲁恭王刘余之后[2] ，东汉末年名士，汉末群雄之一。他身长八尺余，姿貌温厚伟壮，少时知名于世，与七位贤士同号为“八俊”。为大将军何进辟为掾，出任北军中候。后代王睿为荆州刺史，用蒯氏兄弟、蔡瑁等人为辅。李傕等入长安，刘表遣使奉贡。李傕任命刘表为镇南将军、荆州牧，封成武侯，假节，以为己援。 在荆州期间，刘表恩威并著，招诱有方，使得万里肃清、群民悦服。又开经立学，爱民养士，从容自保。远交袁绍，近结张绣，内纳刘备，据地数千里，带甲十余万，称雄荆江，先杀孙坚，后又常抗曹操。然而刘表为人性多疑忌，好于坐谈，立意自守，而无四方之志，后更宠溺后妻蔡氏，使妻族蔡瑁等得权。刘表死后，蔡瑁等人废长立幼，奉表次子刘琮为主；曹操南征，刘琮举州投降，荆州遂没。
						</p>
					</div>
				</div>
				<div class="nr">
					程普
					<div class="ys">（？—210年）
						<p>字德谋，右北平土垠（今河北丰润东）人。东汉末年东吴的名将，历仕孙坚、孙策、孙权三代。他曾跟随孙坚讨伐过黄巾、董卓，斩华雄、破吕布，又助孙策平定江东。孙策死后，他与张昭等人共同辅佐孙权，并讨伐江东境内的山贼，功勋卓著。赤壁之战与周瑜分任左右都督打败曹操，之后大破曹仁于南郡。程普在东吴诸将中年岁最长，被人们尊称为“程公”。</p>
					</div>
				</div>
				<div class="nr">
					吴凤熙
					<div class="ys">虚拟人物
						<p>东吴神皇孙权之母，凤骨龙姿，皓齿峨眉，她手握如意法杖，身披金凤衣，法力无边，可颠倒乾坤。她用意念创造的琉璃神光法球，能在敌军之中来去弹射，被击中者四肢无力，望尘奔北；当她周身环绕七彩光辉法球时，祥云笼罩大地，为友军治疗伤口，使战场彼竭我盈，旗开得胜；神奇的天山玉如意还可召唤万丈神光，灼热之光强烈炙烫敌军，更犹如万把利剑穿心而过，无人可挡。神后乃天山瑶林女神，她教子有方，落落大方，深受神族人民的爱戴，是万流景仰的一代国母。</p>
					</div>
				</div>
				<div class="nr">
					马云禄
					<div class="ys">虚拟人物
						<p>是周大荒的小说——《反三国演义》中的虚构人物。在小说里她是马腾之女，马超之妹，赵云之妻。该人物曾在游戏《真·三国无双3 帝国》里作为自创武将出现，但是4代开始在非帝国系列里都难觅其踪。日本光荣游戏《三国志》系列9代及之后的版本中都以女武将身份出场，最新的三国志12里将其删除，但在PSV版中再次作为附加武将登场。</p>
					</div>
				</div>
				<div class="nr">
					姜维
					<div class="ys">（202年－264年）
						<p>字伯约，天水冀县（今甘肃甘谷东南）人。三国时蜀汉名将，官至大将军。少年时和母亲住在一起，喜欢儒家大师郑玄的学说。因为父亲姜冏战死，姜维被郡里任命为中郎。诸葛亮北伐时，姜维被怀疑有异心，姜维不得已投降蜀汉，被诸葛亮重用。诸葛亮去世后姜维在蜀汉开始崭露头角，费祎死后姜维开始独掌军权，继续率领蜀汉军队北伐曹魏，与曹魏名将邓艾、陈泰、郭淮等多次交手，姜维北伐总计大胜两次；小胜三次；相距不克四次；大败一次，小败一次。后因蜀中大臣也多反对姜维北伐，而宦官黄皓弄权，姜维杀之不成，只得在沓中屯田避祸，后司马昭五道伐蜀，姜维据守剑阁，阻挡住钟会大军，却被邓艾从阴平偷袭成都，刘禅投降。后姜维希望凭自己的力量复兴蜀汉，假意投降魏将钟会，打算利用钟会反叛曹魏以实现恢复汉室的愿望，但最终钟会反叛失败，姜维与钟会一同被魏军所杀。</p>
					</div>
				</div>
			</div>
		</div>

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
			<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
		</div>
	</body>

?CSS部分：

body {
				background: #CCC;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			ul li {
				float: left;
				height: 300px;
				background: #000;
			}
			
			img {
				border: 5px solid #CCC;
			}
			
			#nav {
				background: url(img/bj.jpg);
				width: 1200px;
				height: 300px;
				cursor: pointer;
				margin: 0 auto;
				position: relative;
				border: #999 10px solid;
				border-radius: 10px;
			}
			
			.a1 {
				position: absolute;
				left: 0px;
			}
			
			.a2 {
				position: absolute;
				left: 200px;
			}
			
			.a3 {
				position: absolute;
				left: 400px;
			}
			
			.a4 {
				position: absolute;
				left: 600px;
			}
			
			.a5 {
				position: absolute;
				left: 800px;
			}
			
			.a6 {
				position: absolute;
				left: 1000px;
			}
			
			#name {
				position: relative;
			}
			
			.nr {
				position: absolute;
				left: 220px;
				color: #FFF;
				font-size: 30px;
				padding-top: 50px;
				top: -500px;
			}
			
			.ys {
				font-size: 18px;
				padding-top: 10px;
			}
			
			.aaays {
				width: 200px;
				height: 40px;
				background: #000;
				color: #FFF;
				font-size: 25px;
				text-align: center;
				opacity: 0.7;
				position: absolute;
				top: 200px;
				line-height: 40px;
				display: none;
			}
			
			#dang {
				position: absolute;
				left: 0px;
				width: 200px;
				height: 300px;
			}

JS部分：

$(document).ready(function() {

				//------------------------------------------鼠标点击图片	
				$('#aaa').children('li').click(function() {

					wz = $(this).css('left');
					dq = $(this).index();

					$(this).siblings(dq).fadeOut();
					$(this).animate({
						left: '0px'
					}, 1000);

					$(this).children('img').animate({
						opacity: '1'
					});
					$(this).children('.aaays').css('display', 'none');
					$('#dang').css('z-index', '999');

					//------------------------------------------鼠标划出全部的时候	
					$('#name').children('div').eq(dq).animate({
						top: '0px'
					}, 1000);
				});

				$('#nav').hover(function() {}, function() {
					$('#nav').find('li').fadeIn();
					$('#nav').find('li').eq(dq).animate({
						left: wz
					}, 1000);
					$('#name').children('div').eq(dq).animate({
						top: '-500px'
					});
					$('#dang').css('z-index', '0');
				})

				//------------------------------------------鼠标滑过透明

				$('#aaa').children('li').hover(function() {
					$(this).children('img').animate({
						opacity: '0.5'
					}, 500);
					$(this).children('.aaays').css('display', 'block');
				}, function() {
					$(this).children('img').animate({
						opacity: '1'
					});
					$(this).children('.aaays').css('display', 'none');
				});

			});

文章来源:https://blog.csdn.net/geng1025/article/details/135041907
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章