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);
    })

JS/ JQ 经常使用小特效【持续更新中】

事件冒泡

table 点击切换

导航 滚动到指定位置后 悬浮

点击按钮显示/ 隐藏 点击别处隐藏 点击浮层不动

图片上传

input 点击鼠标自动后移

字符串截取并添加和替换颜色

导航滚动到指定位置后悬浮

点击按钮显示/ 隐藏点击别处隐藏点击浮层不动