zoukankan      html  css  js  c++  java
  • jQuery常用交互效果

    一、点击div控制另一div的显示和隐藏

    $(".con").bind("click",function(){
         var flag=$(".main").is(":hidden");
         if(flag){
             $(".main").addClass('animated fadeIn').show();
         }else{
             $(".main").removeClass('animated fadeIn').hide();
         }
    });
    jQuery 选择器(:hidden)详解:
    元素可以被认为是隐藏的几个情况:
    • 他们的CSS display值是none
    • 他们是type="hidden"的表单元素。
    • 它们的宽度和高度都显式设置为0。
    • 一个祖先元素是隐藏的,因此该元素是不会在页面上显示。

     注意:在jQuery中,visibility: hidden;opacity: 0;都被视作可见的,因为它们在页面上占据了相应的物理空间。详情参考API.

    二、返回顶部

    $(".up").on("click",function(){
        $("html,body").animate({scrollTop:0},1500)
    })

     三、jquery实现当页面下拉到一定位置时,右下角出现回到顶部图标。

     1 showScroll();
     2 function showScroll(){
     3     $(window).scroll(function(){
     4         var scrollValue=$(window).scrollTop();
     5         scrollValue>600?$(".fixed-right").fadeIn():$(".fixed-right").fadeOut();
     6     });
     7     $(".fix-top").click(function() {
     8         $("html,body").animate({scrollTop:0}, 200);
     9     });
    10 }
    View Code

    四、js返回上一页/上一层

    window.history.go(-1);

    或者

    window.history.back().

    返回下一页:window.history.forward()

    返回第几页: window.history.go(返回第几页,也可以使用访问过的URL),比如 window.history.go(-2)为返回后两页。

     五、tab选项卡切换不同内容举例:

    var gtit=$(".group-tit>a");
    var gcon=$(".group-content");
    gtit.click(function() {
        var id=$(this).data('id');
        // console.log(id);
        $(this).addClass('active').siblings().removeClass('active');
        gcon.hide().eq(id).show();
    });
     
  • 相关阅读:
    java获取两个日期之间的所有日期
    java实现https免证书认证
    Linux系统下安装rz/sz命令及使用说明
    Linux 7 关闭、禁用防火墙服务
    Linux下iptables 禁止端口和开放端口
    JBPM4 常用表结构及其说明
    mysql索引使用技巧及注意事项
    MySQL的btree索引和hash索引的区别
    https://www.cnblogs.com/
    Git+Gitlab+Ansible剧本实现一键部署动态网站(二)--技术流ken
  • 原文地址:https://www.cnblogs.com/kangby/p/5056878.html
Copyright © 2011-2022 走看看