Loading

用css和js实现侧边菜单栏点击和鼠标滑动特效

1点击效果：

2关键代码：

css:

#div{
  display:inline-block;
  width:100px;
  height:150px;
  border-radius: 5px;
  blackground-color:#fdfcf8;
}
#ul{
  list-style: none;
  padding:0px;
  margin:0px;
}
#ul li{
  display:block;
  height:30px;
  text-align:center;
}
#ul li a{
  display:block;
  text-decoration: none;
  text-align: center;
  color:black;
}
#ul li a:visited,#ul li a:hover{
  background-color:darkgray;
}
.a_Onclick{
  border-left-style: solid;
  border-left-color:red;
  border-left-width:5px;
}

js:

var a = document.getElementsByTagName("a");
for(let i=0;i<a.length;i++){
  a[i].onclick=function(){
    for(let j=0;j<a.length;j++){
      if(i==j){
        a[i].className="a_Onclick";
      }else{
        a[j].className="";
      }
    }
    }
  }
View js

jq:

$('ul#ul li').click(function(){
  var index = $(this).index();
  $(this).addClass('a_Onclick').siblings().removeClass('a_Onclick');
})

主要想法：在css中设定一个链接被点击效果的css样式，在用js监听，当有一个链接被点击时，该链接css样式改变，同时其兄弟节点的css样式也随之改变。

 3鼠标滑动造成底部线条滑动特效：

transform:scaleX(x);线条缩放（通过x轴）的效果,x为0时显示，x为1时隐藏；
再用:before和:after两个伪类来定义鼠标滑动的状态；
transition：过渡的属性
html:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>侧边栏效果</title>
  <link rel="stylesheet" href="../css/nav.css">
</head>
<body>
  <div id="div">
    <ul id="ul">
      <li>第一条</li>
      <li>第二条</li>
      <li>第三条</li>
      <li>第四条</li>
      <li>第五条</li>
    </ul>
  </div>
</body>
</html>
View Code
 css:
#div{
width:200px;
margin:0 auto;
}
#ul{
    list-style: none;
    width:200px;
}
#ul li{
    position:relative;
  display:block;
  height:50px;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
#ul li::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:200px;
    height:2px;
    background:#FFE300;
    transition:transform .5s;
    transform:scaleX(0);
    transform-origin:100% 0;//改变线条运动方向
}
#ul li:hover::before{
    transform:scaleX(1);
    transform-origin:0 0;
}
View Code

总结：查了百度，学到了这几个css3的属性，总体来说还不太会用。

posted @ 2019-08-18 16:20  逝zxq  阅读(1569)  评论(0)  编辑  收藏  举报