网页部分：
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'); }); });
