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

Genng 发布于2019-08-23 16:43 / 2070人阅读

摘要：点击切换没有懒导航滚动到指定位置后悬浮没有没有懒导航名字导航置顶后的改变样式的名字导航不改变可以删掉该行导航置顶后的改变样式的名字导航不改变可以删掉该行点击按钮显示隐藏点击别处隐藏点击浮层不动

table 点击切换

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




    
    浮层

//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()
})

GPU云服务器云服务器 JS常用特效 jq删除js中json数据 JQ幻灯片特效 php中常用js函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103178.html

前端相关汇总

摘要：简介前端发展迅速，开发者富有的创造力不断的给前端生态注入新生命，各种库框架工程化构建工具层出不穷，眼花缭乱，不盲目追求前沿技术，学习框架和库在满足自己开发需求的基础上，然后最好可以对源码进行调研，了解和深入实现原理，从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 评论0 收藏0
JS基础特效---网页常用特效

1、前言很久没有发布文章啦，终于今天有点时间，就在上班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到GitHub上，欢迎大家star； 2、JS实现特效的概念 JS实现网页特效，其实通俗的说就是通过JS动态地控制css样式，以达到实现动画的效果；（很多动画特效都可以由css3实现，个人推荐是能用css3就用css3；这里用Js的目的我前面...

cppprimer 2019-08-29 13:24 评论0 收藏0
JS基础特效---网页常用特效

1、前言很久没有发布文章啦，终于今天有点时间，就在上班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到GitHub上，欢迎大家star； 2、JS实现特效的概念 JS实现网页特效，其实通俗的说就是通过JS动态地控制css样式，以达到实现动画的效果；（很多动画特效都可以由css3实现，个人推荐是能用css3就用css3；这里用Js的目的我前面...

xuxueli 2019-08-01 17:35 评论0 收藏0
JS基础特效---网页常用特效

1、前言很久没有发布文章啦，终于今天有点时间，就在上班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到GitHub上，欢迎大家star； 2、JS实现特效的概念 JS实现网页特效，其实通俗的说就是通过JS动态地控制css样式，以达到实现动画的效果；（很多动画特效都可以由css3实现，个人推荐是能用css3就用css3；这里用Js的目的我前面...

leonardofed 2019-08-21 16:21 评论0 收藏0