jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

时间：2022-02-19 09:09:02
<%@ 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" />

    <title></title>

    <script src="js/Jquery/jquery-1.7.1.min.js"></script>

    <style type="text/css">

        #thc-count

        {

            width: 400px;

            margin:  auto;

            border: 2px solid black;

        }

        .thc-count-top

        {

            width: 380px;

            line-height: 40px;

            height: 40px;

            border-bottom: 1px solid #ae9f9f;

            margin: 10px;

            overflow: hidden;

            /*text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 1;

            -webkit-box-orient: vertical;*/

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div id="thc-count">

            <div class="thc-count-top">

                <p></p>

            </div>

            <div class="thc-count-top">

                <p></p>

                <p></p>

            </div>

            <div class="thc-count-top">

                <p></p>

                <p></p>

                <p></p>

                <p></p>

            </div>

            <div class="thc-count-top">

                <p></p>

                <p></p>

                <p></p>

                <p></p>

                <p></p>

                <p></p>

            </div>

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $(".thc-count-top").toggle(

    function () {

        var hei = $(this).css('height', 'auto').height();//div 默认用文字撑起来的高度

        $(this).css('height', '50px');//div 最小的高度

        $(this).animate({ height: hei }, )

    },

    function () { $(this).animate({ height: "" }, ) });

</script>

文本框折叠，展示

var hei = $("#div1").css('height', 'auto').height();

-- 获取 div1 的 默认高度（内容撑起来的高度）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="js/jquery-1.7.2.min.js"></script>

    <title></title>

    <style type="text/css">

        .div1 {

            position: relative;

            width: 100px;

            height: 50px;

            background-color: red;

            float: left;

            margin-left: 20px;

        }

        .div2 {

            position: absolute;

            width: %;

            height: 0px;

            top: 50px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

</body>

</html>

<script type="text/javascript">

    $(".div1").mouseover(function () {

        var aaa = $(this).children(".div2:eq(0)");

        aaa.stop().animate({ height: "300px" }, , function () {

            aaa.css("background-color", "blue");    //回调函数，动画执行完后执行 背景色变为绿色

        });

    });

    $(".div1").mouseout(function () {

        var aaa = $(this).children(".div2:eq(0)");     //stop() 停止之前所有的动画--消除动画积累

        aaa.stop().animate({ height: "0px" }, , function () {

            aaa.css("background-color", "green");

        });

    });

</script>

下拉菜单

滑动下拉菜单

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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="js/jquery-1.7.2.min.js"></script>

    <script src="js/jquery.color.js"></script>

    <title></title>

    <style type="text/css">

        #div1 {

            width: 200px;

            height: 200px;

            background-color: #0171c2;

            font-size: 25px;

            font-family: 微软雅黑;

            color: yellow;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div id="div1">

            按钮

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $("#div1").mouseover(function () {

        $(this).animate({ backgroundColor: "black", color: "white" }, );

    });

    $("#div1").mouseout(function () {

        $(this).animate({ backgroundColor: "#0171c2", color: "yellow" }, );

    });

                    //  要引入jquery.color

</script>

字体，颜色渐变

颜色渐变

<%@ 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" />

    <title></title>

    <script src="js/Jquery/jquery-1.7.1.min.js"></script>

    <style type="text/css">

        #thc_tc

        {

            width: 340px;

            background-color: white;

            left: %;

            margin-left: -170px;

            position: fixed;

            top: -500px;

            border-radius: 10px;

            z-index: ;

            /*transform: rotate(-15deg);

            -ms-transform: rotate(5deg);

            -moz-transform: rotate(5deg);

            -webkit-transform: rotate(5deg);

            -o-transform: rotate(5deg);*/

        }

        #thc_top

        {

            background-color:#;

            height: 40px;

            font-size: 20px;

            font-weight: bold;

            text-align: center;

            line-height: 40px;

            border-radius: 10px 10px  ;

        }

        #thc-center

        {

            padding: 10px;

            font-size: 17px;

            text-align: center;

            background-color: white;

        }

        #thc-bottom

        {

            position: relative;

            border-radius: 10px 10px 0px 0px;

            height: 40px;

            text-align: center;

            line-height: 40px;

            width: 100px;

            left: %;

            margin-left: -50px;

            font-size: 22px;

            cursor: pointer;

        }

            #thc-bottom:hover

            {

                background-color: red;

            }

        #zhezhao      /*大幕遮罩样式*/

        {

            height: %;

            width: %;

            background-color: black;

            display: none;

            position: fixed;

            top: 0px;

            left: 0px;

            opacity: 0.3;

            z-index: ;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <input type="button" value="点击" id="thc-bt" />

        <div id="thc_tc">

            <div id="thc_top">标题</div>

            <div id="thc-center">

                内容

            </div>

            <div id="thc-bottom">

                确定

            </div>

        </div>

        <div id="zhezhao"></div>

    </form>

</body>

</html>

<script type="text/javascript">

    //按钮的点击事件

    $("#thc-bt").click(function () {

        myalert("笨蛋", "按错了");

    });

    //窗口弹出方法

    function myalert(a, b) {

        //给标题和内容赋值

        $("#thc_top").html(a);

        $("#thc-center").html(b);

        //弹窗弹出

        $("#thc_tc").stop().animate({ top: "100px" }, ).animate({ top: "90px" }, ).animate({ top: "100px" }, );

        $("#zhezhao").css("display", "block");

    }

        //弹窗收起

    $("#thc-bottom").click(function () {

        $("#thc_tc").stop().animate({ top: "110px" }, ).animate({ top: "-500px" }, , function () {

            $("#zhezhao").css("display", "none");

        });

    });

</script>

弹窗+遮罩

相关文章