<?php /* * * @Authors peng--jun * @Email 1098325951@qq.com * @Date 2015-11-28 09:26:54 * @Link http://www.cnblogs.com/xs-yqz/ * @version $Id$ ========================================== */ ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <link href="" rel="stylesheet"> <style> *{margin: 0;padding: 0;} .active{background-color: yellow;border: 1px solid red;} ul{list-style-type: none;position: relative;width: 800px;height: 50px;background-color: #ccc;line-height: 30px;} li{float: left;margin-right: 10px;width: 100px;height:50px } .title{background-color: #ccc;} .info{display: none;width: 500px;height: 300px;background-color: #790;margin-top: 20px;} img{width: 100%;height: 100%;} p{position: relative;height: 30px;background-color: rgba(0,0,0,0.4);line-height: 30px;top:-30px;display: none;color: #fff} </style> </head> <body> <ul> <li class="active"><img src="images/001.jpg" alt=""></li> <li><img src="images/002.jpg" alt=""></li> <li><img src="images/003.jpg" alt=""></li> <li><img src="images/004.jpg" alt=""></li> </ul> <div class="info" style="display:block"><img src="images/001.jpg" alt=""><p>11111111111</p></div> <div class="info"><img src="images/002.jpg" alt=""><p>222222222222</p></div> <div class="info"><img src="images/003.jpg" alt=""><p>333lalalalal</p></div> <div class="info"><img src="images/004.jpg" alt=""><p>4444444444</p></div> <script type="text/javascript"> /* window.onload = function(){ var aTitle = document.getElementsByTagName('li'); var aInfo = document.getElementsByClassName('info'); for (var i = 0; i < aTitle.length; i++) { aTitle[i].index = i; aTitle[i].onmouseover = function(){ for (var i = 0; i < aTitle.length; i++) { aTitle[i].className = ''; aInfo[i].style.display = 'none'; }; this.className = 'active';//this表示当前的事件； aInfo[this.index].style.display = 'block'; // } }; } */ $(function(){ $("li").each(function(index){ $(this).mouseover(function(){ $("li").eq(index).addClass("active"); $("li").eq(index).siblings("li").removeClass("active"); $("div.info").eq(index).css({"display":"block"}); $("div.info").eq(index).siblings("div.info").css({"display":"none"}); $("p").eq(index).css({"display":"none"}); $("p").eq(index).fadeIn("slow"); }).mouseout(function(){ /*$("p").eq(index).fadeOut();*/ }) }); }); </script> </body> </html>
