1、鼠标经过导航中li时，一个活动的li跟随鼠标移动，最终移动到鼠标的停留的位置。（如需鼠标离开后让活动的li回到初始位置，则用jq hover事件，当鼠标离开时，给活动的li设置left是0）
2、鼠标经过div时，图片放大，layer层出现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .con {
margin: 20px auto;
width: 200px;
border: 1px solid #ccc;
position: relative
} .con_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #000;
opacity: 0;
z-index: 10;
transition: all 1s linear 0s;
} .con_img {
width: 100%;
height: 200px;
overflow: hidden;
z-index: 1;
} .con img {
width: 100%;
transition: all 1s linear 0s;
} .con:hover img {
transform: scale(1.2)
} .con:hover .con_layer {
opacity: 0.5;
} .line {
margin: 60px auto;
border: 1px solid #fff;
width: 0;
} .para {
color: #fff;
margin: 40px auto;
text-align: center;
} .clearfix {
zoom: 1;
} .clearfix:after {
content: ".";
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden
} .nav {
background-color: #0099cc;
list-style: none;
position: relative;
z-index: 999
} .nav li {
float: left;
width: 200px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
transition: all 0.5s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
} .nav li a {
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
} .nav li:hover a {
font-weight: bold;
} .nav .nav_bg {
position: absolute;
left: 0;
top: 0;
background-color: #FF9900;
z-index: -1;
border-radius: 5px;
box-shadow: 0px 0px 4px #333
} .next {
padding: 0 20px;
width: 200px;
height: 36px;
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: red url("ico-bg.png") no-repeat center;
transition:all 1s linear 0s;
} .next:hover {
background:green url("ico-bg.png") no-repeat 200px center; }
</style>
</head>
<body>
<div class="con">
<div class="con_img">
<img src="1.jpg" alt=""/>
</div>
<div class="con_layer">
<div class="para">我是图文解说</div>
<div class="line"></div>
</div>
<p>
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
</p>
</div>
<ul class="nav clearfix">
<li><a href="javascript:void (0);">111</a></li>
<li><a href="javascript:void (0);">222</a></li>
<li><a href="javascript:void (0);">333</a></li>
<li><a href="javascript:void (0);">444</a></li>
<li><a href="javascript:void (0);">555</a></li>
<li><a href="javascript:void (0);">666</a></li>
<li class="nav_bg"></li>
</ul>
<div class="next"></div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".con").hover(function () {
$(".line").animate({width: "120px"}, 1000)
}, function () {
$(".line").animate({width: 0}, 1000)
});
var flag = 200;
$(".nav").find("li").on("mouseover", function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
});
/* $(".nav").find("li").hover(function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
},function(){
$(".nav_bg").css({left:0})
})*/
</script>
</html>