<?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>
