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

弹窗+遮罩

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

  1. JQueryEasyUI easyui-combobox 单击文本区域显示下拉菜单

    //单击内容框弹出下拉菜单 $(".combo").click(function (e) { if (e.target.className == 'combo-text valid ...

  2. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  3. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  4. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  5. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  6. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  7. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  8. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  9. JQuery对单选框，复选框，下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

随机推荐

  1. 提取日志中出现的userId或其他信息

    项目上线后经常出现需要统计用户数据.接口请求等.完美的情况下,在项目开始前就设计好哪些request.中间过程需要落地到db.或以一定格式存入专门的log中,但也常需要同学们临时去业务日志中grep ...

  2. 1.1初识python

    1.目前大量的公司都在使用python,功能强大很是牛逼! 2.运维要懂开发,做个全栈的工程师贼牛逼 3.python是一个解释型语言,编译型和解释型的区别是: ①编译型语言由编译器(Compiler ...

  3. Oracle通过序列+触发器实现主键自增

    接触oracle没多久,在建表的时候发现还不会如何设置主键自动增长.和mysql的设置为AUTO_INCREMENT属性相比,要复杂很多,所以现在记录起来. 我使用的是序列+触发器的方式. 现在已经创 ...

  4. 深入理解java虚拟机一之走进Java

    Java技术体系 Java程序设计语言.Java虚拟机.Java API类库统称为JDK Java API类库中Java SE API子集和Java虚拟机统称为JRE Java发展史 1991年4月 ...

  5. java技术突破要点

    一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...

  6. 131.leetcode-Palindrome Partitioning

    解法一. class Solution { public: vector<vector<string>> partition(string s) { vector<vec ...

  7. python中实现排序list

    作为一个非常实用的一种数据结构,排序链表用在很多方面,下面是它的python代码实现: from Node import * class OrderedList: def __init__(self) ...

  8. 机器学习技法笔记：15 Matrix Factorization

    Roadmap Linear Network Hypothesis Basic Matrix Factorization Stochastic Gradient Descent Summary of ...

  9. Maven 常用的远程中央仓库地址

    https://repo1.maven.org/maven2/ http://maven.jahia.org/maven2/ http://maven.aliyun.com/nexus/content ...

  10. ffmpeg 实现多宫格效果，视频拼接合成

    通过FFmpeg建立画布,以多宫格方式展现 一下为执行命令 -re -i 1.mp4 -re -i 2.mp4 -re -i 3.mp4 -re -i 4.mp4 -filter_complex &q ...