JS/ JQ 經常使用小特效【持續更新中】

時間 2019-12-29

原文原文鏈接

事件冒泡

function prevent() {
 window.event? window.event.cancelBubble = true : e.stopPropagation();
}

table 點擊切換

<!-- 沒有css 懶... -->

<!-- HTML -->
    <ul class="sideslip-head">
        <li class="active"><span>1111</span></li>
        <li><span>22222</span></li>
        <li><span>33333</span></li>
    </ul>
    
    <div class="sideslip-box">
        <ul class="sideslip-titles">
            <li>11111</li>
        </ul>
        <ul class="sideslip-titles">
            <li>222222</li>
        </ul>
        <ul class="sideslip-titles">
            <li>33333</li>
        </ul>  
    </div>

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

導航滾動到指定位置後懸浮

/*  

沒有css
沒有html
懶...

*/

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

點擊按鈕顯示/ 隱藏點擊別處隱藏點擊浮層不動

/* 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;
    }

<!-- html -->

<div id="wrapper" class="wrapper">
    <button id="clickMe">點我</button>
    <div id="popover" class="popover"><input type="checkbox">浮層</div>
</div>

//jq 方法1：點擊自身能隱藏 其他功能 和方法2 同樣

$(clickMe).on('click',function (ev) {
    ev.stopPropagation();
    $(popover).slideToggle(); //slideToggle 這個可換
    
    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：點擊自身不不不不不不不能隱藏 其他功能 和方法1 同樣

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

圖片上傳

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    body {background: #edf0f2;}
    img {width: 100%;display: block;border: none;vertical-align: bottom;border: none;}
    input[type="button"] {-webkit-appearance: none;}
    .productDrawingBox {background-color: #fcfcfc;color: #333333;font-size: 16px;padding-left: 11px;border-bottom: solid 1px #e5e5e5;}
    .productDescription {height: 44px;line-height: 44px;}
    .productImg {height: 96px;overflow: hidden;} 
    .imgBiMG{width: 78px;height: 81px;float: left;display: block;}
    .uploadDIv {width: 78px;height: 81px;background-color: #edf0f2;font-size: 28px;color: #bfbfbf;text-align: center;line-height: 81px;float: left;position: relative;}
    .uploadDIv input {width: 78px;height: 78px;opacity: 0;position: absolute;right: 0px;top: 0px;z-index: 4;padding: 0;}
</style>
</head>
<body>
<div class="productDrawingBox">
    <div class="productDescription">上傳圖片</div>
        <div class="productImg">
            <div id="uploadBox"></div> 
            <div class="uploadDIv">
                <span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
    var img = []; //建立一個空對象用來保存傳入的圖片
    var AllowImgFileSize = '101376'; //1兆
    $("#inputs").change(function() {
        var fil = this.files;
        for(var i = 0; i < fil.length; i++) {
        var curr = $('#inputs')[i].files[0].size;
        if(curr > AllowImgFileSize * 101376) { //當圖片大於1兆提示
            layer.msg("圖片文件大小超過限制 請上傳小於99M的文件");
        } else {
            reads(fil[i]);
            img.push($('#inputs')[i].files[0]); //將傳入的圖片push到空對象中
        }
    }
    if(img.length >= 6) { //判斷圖片的數量，數量不能超過3張
        $('.uploadDIv').hide();
    } else {
        $('.uploadDIv').show();
    }
    console.log(img);
    });
    
    function reads(fil) {
        var reader = new FileReader();
        reader.readAsDataURL(fil);     
        reader.onload = function() {
            document.getElementById("uploadBox").innerHTML += "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
        }
    }
})
</script>
</html>

input 點擊鼠標自動後移

<!-- HTML -->
<div class="position-find" >
    <form action=""name=card>
        <input maxlength="1" name="t1" type="text">
        <input maxlength="1" name="t2" type="text">
        <input maxlength="1" name="t3" type="text">
        <i>-</i>
        <input maxlength="1" name="t4" type="text">
        <input maxlength="1" name="t5" type="text">
        <input maxlength="1" name="t6" type="text">
        <input maxlength="1" name="t7" type="text">
        <i>-</i>
        <input maxlength="1" name="t8" type="text">
        <input maxlength="1" name="t9" type="text">
        <input maxlength="1" name="t10" type="text">
        <input maxlength="1" name="t11" type="text">
    </form>
</div>

/* JS */
$('.position-find input').bind('keyup',function(){
         if ($(this).attr('name') == 't11')
            $("input[type='tel']").focus()
            $(this).nextAll('input').first().focus(); 
})

字符串截取並添加和替換顏色

/* JS */
$('須要替換的').each(function(){
        var str = $(this).text();
        var h3Html = str.substring(0, 3)+"<span class='須要添加的顏色'>"+str.substring(3, 7)+"</span>"+str.substring(7, 11);
        $(this).html(h3Html);
    })