首页 > 代码库 > 2017-6-4 JQuery中的选择器和动画 弹窗遮罩

2017-6-4 JQuery中的选择器和动画 弹窗遮罩

2024-09-30 17:32:38   213人阅读

（一）选择器

1.基本选择器：

　　id选择器：#　　class选择器：.　　标签选择器：标签名

　　后代选择器：用,隔开　　后代选择器：用空格隔开

2.过滤选择器：

　　（1）基本过滤：

　　　　首个：:first　　尾个：:last　　任意个：:eq(索引号)

　　　　大于：:gt(索引号)　　小于：:lt(索引号)　　排除：:not(选择器)

　　　　奇数：:odd　　偶数：:evev

　　（2）属性过滤：

　　　　属性名过滤：[属性名]　　属性值过滤：[属性名=值][属性名！=值]

　　（3）内容过滤

　　　　文字：:contains("字符串")　　子元素：:has("选择器")

（二）动画

1.show();hide(); ---- 显示和隐藏

　　例：点击按钮实现div的隐藏和显示　　　　

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").hide();
        }
        else
        {
            $("#div1").show();
        }

    });



</script>

2.slideDown(), 放下效果  ; slideUp()  卷起效果    卷帘门效果，

例：

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").slideUp();
        }
        else
        {
            $("#div1").slideDown();
        }

    });



</script>

3.fadeIn(), 淡入    fadeOut()   淡出    淡入淡出的效果

例：

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").fadeOut();
        }
        else
        {
            $("#div1").fadeIn();
        }

    });



</script>

 4.自定义动画：

1.    格式：animate({left:"300px",top:"300px"},3000,function(){回调函数})

2.停止动画，防止动画累计：.stop();

 应用制作弹窗遮罩：

css样式代码：

#xws_tc {
    width:340px;
    background-color:white;
    left:50%;
    margin-left:-170px;
    position:fixed;
    top:-500px;
    border-radius:10px;
    z-index:11;
}
#xws_top {
    background-color:yellow;
    height:35px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    line-height:35px;
    border-radius:10px 10px 0 0;
}
#xws-center {
    padding:10px;
    font-size:17px;
    text-align:center;
    background-color:white;
}
#xws-bottom{
    position:relative;
    border-radius:10px 10px 0px 0px;
    height:40px;
    text-align:center;
    line-height:40px;
    width:100px;
    left:50%;
    margin-left:-50px;
    font-size:22px;
    cursor:pointer;
}
    #xws-bottom:hover {
        background-color:red;
    }
#zhezhao {
    height:100%;
    width:100%;
    background-color:black;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.3;
    z-index:10;
}

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src=http://www.mamicode.com/"Js/jquery-1.7.1.min.js"></script>
    <link href=http://www.mamicode.com/"Css/StyleSheet.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value=http://www.mamicode.com/"点击" id="xws-bt"/>
    <div id="xws_tc">
        <div id="xws_top">这里是标题</div>
        <div id="xws-center">
            啊沙发沙发阿士大夫撒萨法阿飞萨达四大撒旦撒啊实打实大师达到按时大大
        </div>
        <div id="xws-bottom">
                确定
        </div>
    </div>
        <div id="zhezhao"></div>
    </form>
</body>
</html>
<script type="text/javascript">
    //按钮的点击事件
    $("#xws-bt").click(function () {
        myalert("你好啊","欢迎来我家");
    });

    //窗口弹出方法
    function myalert(a, b) {
        //给标题和内容赋值
        $("#xws_top").html(a);
        $("#xws-center").html(b);
        //弹窗弹出
        $("#xws_tc").stop().animate({ top: "100px" }, 500).animate({ top: "90px" }, 100).animate({ top: "100px" }, 200);
        $("#zhezhao").css("display", "block");
    }

    $("#xws-bottom").click(function () {
        $("#xws_tc").stop().animate({ top: "110px" }, 100).animate({ top: "-500px" }, 400, function () {
            $("#zhezhao").css("display", "none");
        });
       

    });

</script>

 

 

 

　　　　

2017-6-4 JQuery中的选择器和动画 弹窗遮罩


联系
我们