鼠标经过导航中li时，一个彩色模块跟着鼠标移动

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>

 

posted @ 2016-08-16 10:37  dongxiaolei  阅读(552)  评论(0)  编辑  收藏  举报