JS/ JQ 常用小特效【持續(xù)更新中】

Genng 發(fā)布于2019-08-23 16:43 / 1942人閱讀

摘要：點(diǎn)擊切換沒(méi)有懶導(dǎo)航滾動(dòng)到指定位置后懸浮沒(méi)有沒(méi)有懶導(dǎo)航名字導(dǎo)航置頂后的改變樣式的名字導(dǎo)航不改變可以刪掉該行導(dǎo)航置頂后的改變樣式的名字導(dǎo)航不改變可以刪掉該行點(diǎn)擊按鈕顯示隱藏點(diǎn)擊別處隱藏點(diǎn)擊浮層不動(dòng)

table 點(diǎn)擊切換

/* JQ */
$(".sideslip-head>li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".sideslip-titles").eq($(this).index()).css("display","block").siblings().css("display","none")
})

導(dǎo)航滾動(dòng)到指定位置后懸浮

/*  

沒(méi)有css
沒(méi)有html
懶...

*/

/* JQ */
$(window).scroll(function(){
    var bignav = $(".導(dǎo)航名字");
    if( $(this).scrollTop() >195){
        bignav.addClass("導(dǎo)航置頂后的改變樣式 的名字"); // 導(dǎo)航css不改變 可以刪掉該行
        bignav.css({
            width:"100%",
            position:"fixed",
            top:50,
            zIndex:10
        });
    }
    else{
        bignav.removeClass("導(dǎo)航置頂后的改變樣式 的名字"); // 導(dǎo)航css不改變 可以刪掉該行
        bignav.css("position","static");
    }
});

點(diǎn)擊按鈕顯示/ 隱藏點(diǎn)擊別處隱藏點(diǎn)擊浮層不動(dòng)

/* css */


.wrapper{
    position:relative;
    display:inline-block;
}
    .popover{
        display: none;
        border:1px solid red;
        position:absolute;
        left:50px;
        top:0;
        white-space:nowrap;
        padding:10px;
        margin-left:10px;
        background: white;
    }
    .popover::before{
        position:absolute;
        right:100%;
        top:0;
        border: 10px solid transparent;
        border-right-color:red;
        content:"";
    }
    .popover::after{
        position: absolute;
        right:100%;
        top:0;
        border:10px solid transparent;
        border-right-color: white;
    }




    
    浮層

//jq 方法1：點(diǎn)擊自身能隱藏 其余功能 和方法2 一樣

$(clickMe).on("click",function (ev) {
    ev.stopPropagation();
    $(popover).slideToggle(); //slideToggle 這個(gè)可換
    
    var flag = true;
    $(document).bind("click",function(e){
        var target = $(e.target);
        if(target.closest($(clickMe)).length == 0 && flag == true){
            $(popover).slideUp();
            flag = false;
        }
    });
});

//jq 方法2：點(diǎn)擊自身不不不不不不不能隱藏 其余功能 和方法1 一樣

$(clickMe).on("click",function () {
    $(popover).show()
    $(document).one("click",function(){
        console.log("document")
        $(popover).hide()
    })
})
$(wrapper).on("click",function(e){
    e.stopPropagation()
})