亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery左邊滑出導(dǎo)航

Original 2018-11-26 22:26:14 161
abstract:<!DOCTYPE html> <html>     <head>         <title>jQuery左邊滑出導(dǎo)航</title>       
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery左邊滑出導(dǎo)航</title>
        <meta charset="UTF-8">
        <!-- <link rel="stylesheet" href="static/css/style.css" type="text/css" charset="utf-8"/> -->
        <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
        <script type="text/javascript" src="static/js/jquery.js"></script>
        <script type="text/javascript">
        	$(function(){
        		$('#nav li').stop().animate({'marginLeft':'-65px'},1000)
        		$('li').hover(function(){
        				$(this).stop().animate({'marginLeft':'-2px'},300)
        			},//移上
                   function(){
        				$(this).stop().animate({'marginLeft':'-60px'},100)
        			}//移出
              )
            })
        </script>
        <style type="text/css">
          *{margin: 0px;padding: 0px;}
          ul{list-style: none; position: fixed;top: 10px;left: 0px;}
          #nav li{width: 80px;height: 80px;margin: 10px 0px;border-top-right-radius:10px;border-bottom-right-radius: 10px;line-height: 80px;text-align: center; }
          .li1{background: rgba(77,31,216,0.5);}
          .li2{background: rgba(247,3,8,0.5);}
          .li3{background: rgba(247,247,3,0.5);}
          .li4{background: rgba(44,3,247,0.5);}
          .li5{background: rgba(3,247,36,0.5);}
          #nav li span{font-weight: 700;font-size: 30px;color: #fff;}
        </style>

    </head>
    <body>
      <ul id="nav">
      	<li class="li1"><span class="fa fa-tags"></span></li>
      	<li class="li2"><span class="fa fa-address-card"></span></li>
      	<li class="li3"><span class="fa fa-grav"></span></li>
      	<li class="li4"><span class="fa fa-user-o"></span></li>
      	<li class="li5"><span class="fa fa-handshake-o"></span></li>
      </ul>
    </body>
</html>

```javascript

        //初始動畫

        $('#nav li').stop().animate({'marginLeft':'-65px'},1000)

        //滑出動畫

        $('li').hover(

        //移上參數(shù)

            function(){

             $(this).stop().animate({'marginLeft':'-2px'},300)

        },

        //移出參數(shù)

             function(){

        $(this).stop().animate({'marginLeft':'-60px'},100)

        }

              )

            })

```

方法基本學(xué)會了,但是自己如果需求并做出來估計(jì)還得挺久的

Correcting teacher:滅絕師太Correction time:2018-11-27 09:17:37
Teacher's summary:仔細(xì)調(diào)整就好了,邏輯理清楚,實(shí)際操作就簡單很多!

Release Notes

Popular Entries