css3實現滑鼠跟隨導航效果

來源:互聯網
上載者:User
本文主要和大家介紹了css3動畫過渡實現滑鼠跟隨導航效果的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能協助到大家。

效果知識點:html/css布局思維, p+css講解,css3動畫,盒子模型, 浮動與定位,滑鼠事件。

html代碼:

<p class="wrap">            <ul>                <li style="background-position:0px 0px; border-top:1px dotted #ccc;border-left:1px dotted #ccc;"></li>                <li style="background-position:-230px 0px; border-top:1px dotted #ccc"></li>                <li style="background-position:-460px 0px; border-top:1px dotted #ccc"></li>                <li style="background-position:-690px 0px; border-top:1px dotted #ccc"></li>                <li style="background-position:-920px 0px; border-top:1px dotted #ccc"></li>                <li style="background-position:-1150px 0px;border-left:1px dotted #ccc;"></li>                <li style="background-position:-1370px 0px"></li>                <li style="background-position:-1600px 0px"></li>                <li style="background-position:-1830px 0px"></li>                <li style="background-position:-2060px 0px"></li>                <li style="background-position:-2290px 0px;border-left:1px dotted #ccc;"></li>                <li style="background-position:-2520px 0px"></li>                <li style="background-position:-2750px 0px"></li>                <li style="background-position:-2980px 0px"></li>                <li style="background-position:-3210px 0px"></li>            </ul>            <p class="box"></p>

css代碼:


        <style>            *{                margin:0px;                padding:0px;            }            html{                height:100%;            }            body{                width:100%;                height:100%;                background:url("images/wallpaper4.jpg");                background-size:100% 100%;                overflow: hidden;            }            .wrap{                position:relative;                width:1156px;                height:450px;                margin:50px auto;            }            .wrap ul li{                position:relative;                z-index:10;                width:230px;                height:150px;                float:left;                list-style:none;                border-right:1px dotted #ccc;                border-bottom:1px dotted #ccc;                background:url("images/clients.png") no-repeat;                -webkit-transition:1s;                -moz-transition:1s;                -ms-transition:1s;                -o-transition:1s;                transition:1s;            }            .box{                position:absolute;                left:0px;                top:0px;                z-index:2;                width:230px;                height:150px;                background:rgba(0,0,0,.2);                -webkit-transition:1s;                -moz-transition:1s;                -ms-transition:1s;                -o-transition:1s;                transition:1s;            }        </style>

javascript代碼:


    <script>            var oLi = document.getElementsByTagName("li");            var box = document.getElementsByClassName("box")[0];            for (var i = 0;i<oLi.length ;i++ )            {                oLi[i].onmousemove = function(){                    var _left = this.offsetLeft;                    var _top = this.offsetTop;                    box.style.left = _left + "px";                    box.style.top = _top + "px";                    this.style.backgroundPositionY = "-150px";                }                oLi[i].onmouseout = function(){                    this.style.backgroundPositionY = "0px";                }            }        </script>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.