码库记事本

码库记事本

css3动画过渡实现鼠标跟随导航效果

小诸哥 0

本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下:

鼠标跟随导航效果

效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标事件。

html代码:

  1. <div class="wrap">
  2.              <ul>
  3.                  <li style="background-position:0px 0px; border-top:1px dotted #ccc;border-left:1px dotted #ccc;"></li>
  4.                  <li style="background-position:-230px 0px; border-top:1px dotted #ccc"></li>
  5.                  <li style="background-position:-460px 0px; border-top:1px dotted #ccc"></li>
  6.                  <li style="background-position:-690px 0px; border-top:1px dotted #ccc"></li>
  7.                  <li style="background-position:-920px 0px; border-top:1px dotted #ccc"></li>
  8.                  <li style="background-position:-1150px 0px;border-left:1px dotted #ccc;"></li>
  9.                  <li style="background-position:-1370px 0px"></li>
  10.                  <li style="background-position:-1600px 0px"></li>
  11.                  <li style="background-position:-1830px 0px"></li>
  12.                  <li style="background-position:-2060px 0px"></li>
  13.                  <li style="background-position:-2290px 0px;border-left:1px dotted #ccc;"></li>
  14.                  <li style="background-position:-2520px 0px"></li>
  15.                  <li style="background-position:-2750px 0px"></li>
  16.                  <li style="background-position:-2980px 0px"></li>
  17.                  <li style="background-position:-3210px 0px"></li>
  18.              </ul>
  19.              <div class="box"></div>

css代码:

  1.      <style>
  2.              *{
  3.                  margin:0px;
  4.                  padding:0px;
  5.              }
  6.              html{
  7.                  height:100%;
  8.              }
  9.              body{
  10.                  width:100%;
  11.                  height:100%;
  12.                  background:url("images/wallpaper4.jpg");
  13.                  background-size:100% 100%;
  14.                  overflow: hidden;
  15.              }
  16.              .wrap{
  17.                  position:relative;
  18.                  width:1156px;
  19.                  height:450px;
  20.                  margin:50px auto;
  21.              }
  22.              .wrap ul li{
  23.                  position:relative;
  24.                  z-index:10;
  25.                  width:230px;
  26.                  height:150px;
  27.                  float:left;
  28.                  list-style:none;
  29.                  border-right:1px dotted #ccc;
  30.                  border-bottom:1px dotted #ccc;
  31.                  background:url("images/clients.png") no-repeat;
  32.                  -webkit-transition:1s;
  33.                  -moz-transition:1s;
  34.                  -ms-transition:1s;
  35.                  -o-transition:1s;
  36.                  transition:1s;
  37.              }
  38.              .box{
  39.                  position:absolute;
  40.                  left:0px;
  41.                  top:0px;
  42.                  z-index:2;
  43.                  width:230px;
  44.                  height:150px;
  45.                  background:rgba(0,0,0,.2);
  46.                  -webkit-transition:1s;
  47.                  -moz-transition:1s;
  48.                  -ms-transition:1s;
  49.                  -o-transition:1s;
  50.                  transition:1s;
  51.              }
  52.          </style>

javascript代码:

  1.      <script>
  2.              var oLi = document.getElementsByTagName("li");
  3.              var box = document.getElementsByClassName("box")[0];
  4.              for (var i = 0;i<oLi.length ;i++ )
  5.              {
  6.                  oLi[i].onmousemove = function(){
  7.                      var _left = this.offsetLeft;
  8.                      var _top = this.offsetTop;
  9.                      box.style.left = _left + "px";
  10.                      box.style.top = _top + "px";
  11.                      this.style.backgroundPositionY = "-150px";
  12.                  }
  13.                  oLi[i].onmouseout = function(){
  14.                      this.style.backgroundPositionY = "0px";
  15.                  }
  16.              }
  17.          </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: 鼠标跟随导航