首頁猿問幫忙看一下，真心需要幫助，用js實...

幫忙看一下，真心需要幫助，用js實現(xiàn)側(cè)邊鼠標(biāo)放上去就滑出，移出就滑入效果。

JavaScript

兔子吃點窩邊草 2017-08-21 18:43:25

查看完整描述

3 回答

Jaydon_

TA貢獻(xiàn)26條經(jīng)驗獲得超10個贊

你把你的樣式代碼貼出來啊這樣誰看得懂啊。。。還有說出你的具體問題。。哪里有問題

反對回復(fù) 2017-08-21

啊啊啊啊123

TA貢獻(xiàn)25條經(jīng)驗獲得超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>

不好意，自已寫的玩的，沒仔細(xì)看你的問題

反對回復(fù) 2017-08-21