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

<%@ 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 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】的更多相关文章

JQueryEasyUI easyui-combobox 单击文本区域显示下拉菜单
//单击内容框弹出下拉菜单 $(".combo").click(function (e) { if (e.target.className == 'combo-text valid ...
jquery 实现下拉菜单
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js 版本不限 : 接下来把=================== ...
DOM（十）使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节查看作业目录需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
(三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
jQuery打造智能提示插件二（可编辑下拉框）
在上一篇 jQuery打造智能提示插件上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...
JQuery对单选框，复选框，下拉菜单的操作
JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

随机推荐

ios 单例的再次理解
单例模式在建模的时候,如果这个东西确实只需要一个对象,多余的对象都是无意义的,那么就考虑用单例模式.比如定位管理(CLLocationManager),硬件设备就只有一个,弄再多的逻辑对象 ...
2019.02.28 bzoj3527: [Zjoi2014]力（fft）
传送门 fftfftfft菜题. 题意简述:给一个数列aia_iai,对于i=1→ni=1\rightarrow ni=1→n求出ansi=∑i<jai(i−j)2−∑i>jai(i−j ...
走进JDK(九)------AbstractMap
map其实就是键值对,要想学习好map,得先从AbstractMap开始. 一.类定义.构造函数.成员变量 public abstract class AbstractMap<K,V> i ...
Request processing failed; nested exception is java.lang.IllegalStateException: getOutputStream() has already been called for this response
问题分析: 在ServletRequest servletRequest中已经存在一个项目名称,此时,又用项目名称访问 http://localhost:8080/rent/pdf/preview r ...
form表单保存和取出
function saveConfig() { var configName = document.title; if (!localStorage) return; var Config = {}; ...
JQuery续
一.表单属性选择器 :enabled :disabled :checked :selected <body> <form> <input type="check ...
handoop安装部署集群
hdfs 1.0版本一个namenode (secordary namenode 2.0冷备份) 和多个datanode构成分布式文件系统 mapreduce 一个 jobtracker 协调 ta ...
Authorization Security for Mongodb
To keep security for the mongodb server, we can create an authorized machanism. db.createUser( { use ...
异常与Final
Throwable 类是 Java 语言中所有错误或异常的超类(这就是一切皆可抛的东西).它有两个子类:Error和Exception.Error:用于指示合理的应用程序不应该试图捕获的严重问题.这种 ...
CentOS操作系统防火墙添加例外端口
http://blog.csdn.net/inrgihc/article/details/63392004 CentOS6与CentOS7添加防火墙例外端口的命令不用,需单独来说: (1)CentOS ...

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

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

随机推荐

热门专题