幫忙看一下，真心需要幫助，用js實現側邊鼠標放上去就滑出，移出就滑入效果。
兔子吃點窩邊草
2017-08-21 18:43:25
3 回答
啊啊啊啊123
TA貢獻25條經驗 獲得超8個贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style?type="text/css">
????*{
????????padding:?0;
????????margin:?0;
????}
????????a{
????????????text-decoration:?none;
????????????color:?#FFF;
????????????display:?inline-block;
????????????width:?50%;
????????????height:?100%;
????????????text-align:?center;
????????????}
????????#wave>li{
????????????width:?200px;
????????????height:?100px;
????????????line-height:?100px;
????????????background-color:?#666;
????????????margin-bottom:?2px;
????????????text-align:?right;
????????????transform:?translateX(-50%);
????????????transition:?all?1s;
????????}
????????#wave>li.wave{
????????????transform:?translateX(0);
????????}
????</style>
</head>
<body>
????<ul?id="wave">
????????<li><a?href="#">1</a></li>
????????<li><a?href="#">2</a></li>
????????<li><a?href="#">3</a></li>
????????<li><a?href="#">4</a></li>
????????<li><a?href="#">5</a></li>
????????<li><a?href="#">6</a></li>
????????<li><a?href="#">7</a></li>
????????<li><a?href="#">8</a></li>
????????<li><a?href="#">9</a></li>
????????<li><a?href="#">10</a></li>
????</ul>
<script?type="text/javascript">
????var?ul?=?document.querySelector("#wave");
????var?lis?=?ul.querySelectorAll("li");
????for?(var?i?=?0;?i?<?lis.length;?i++)?{
????????lis[i].onmouseover?=?function(){
????????????this.classList.add('wave');
????????}
????????lis[i].onmouseout?=?function(){
????????????this.classList.remove('wave');
????????}
????}
</script>
</body>
</html>不好意，自已寫的玩的，沒仔細看你的問題
添加回答
舉報
0/150
提交
取消