幽靈菜單介紹；

時間 2019-11-16

標籤幽靈菜單介紹简体版

原文原文鏈接

以往咱們都是鼠標懸停纔出現的幽靈菜單；今天給你們介紹一個滾動的幽靈菜單

滾動的幽靈菜單

1.html 隨便設置
代碼以下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<style>
*{margin:0;padding: 0;}
body{javascript

height: 2000px;

}
.shou{css

width: 100%;
    height: 48px;
    border-bottom: 2px solid red;
    background:url(images/1.png) no-repeat 50px;
    position: absolute;
    top:0;
    left: 0;


}
.lai input{
    width: 350px;
    height: 35px;
    color: rgb(153, 153, 153);
    border:none;
    outline:none;
    letter-spacing: normal;
    word-spacing: normal;
    background-color: #efefef;
}

.lai{
    height: 35px;
    width: 400px;
    margin:0 auto;
    margin-top:5px;
    background-color: red;
    position: relative;
}
.lai span{
    position: absolute;
    right: 65px;
    top: 7px;
    color: rgb(153, 153, 153);
}
.lai>i{
    margin-left: 10px; 
    font-size: 20px;
font-weight: 700;
color: #fff;

}
.ki{
    height: 55px;
    width: 100%;
}

</style>
</head>
<body>
<div class="ki"></div>html

<div class="shou">
    <div class="lai">
        <input type="" placeholder="請輸入你須要的產品" value="" >
         <span><i class="fa fa-camera"></i></span>
         <i class="fa fa-search"></i>
    </div>
</div>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>

jQuery部分

<script type="text/javascript">
    function hai() {
        var lai = document.documentElement.scrollTop;
        if(lai>300){
            $(".shou").animate({"top":lai},500).show();

        }else{
            $(".shou").hide();
        }
            }

        var timer=null;
        var lastTime=new Date().getTime();
        
        var isIe6-navigator.userAgent.indexOf("MSIE 6.0") > 0;
        window.onscroll=function(){
            if(isIe6)
            {
                return false
            }
        }
        
        var timr=null;
        var lastTime=new Date().getTime();
        window.onscroll=function(){
            var st=document.documentElement.scrollTop;
            if(st>300){

            if(!isIe6)
            {
                clearTimeout(timer);
                    timer=setTimeout(function(){
                        $(".shou").removeClass("fixed");
                        $(".shou").show().animate({"top":st},100);

                },100);
            }else{
                $(".shou").show()
            }
            
            }else{
                $(".show").hide();
            }
</script>

</body>
</html>java

1. 實例介紹Cocos2d-x精靈菜單和圖片菜單
2. CSS3幽靈
3. Fiddler_菜單欄介紹_02
4. jboss幽靈報錯
5. 聊聊幽靈Class
6. html5: 幽靈按鈕
7. 關於IE6幽靈字體
8. 幽靈按鈕的實現
9. 幽靈交易者策略
10. 安裝幽靈瀏覽器
更多相關文章...
• Eclipse 菜單 - Eclipse 教程
• Eclipse 重構菜單 - Eclipse 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• TiDB 在摩拜單車在線數據業務的應用和實踐

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。