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 ...
随机推荐
- tomcat 配置 使用 HTTPS
1.生成证书 keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore "d:\temp ...
- 居于H5的多文件、大文件、多线程上传解决方案
文件上传在web应用中是比较常见的功能,前段时间做了一个多文件.大文件.多线程文件上传的功能,使用效果还不错,总结分享下. 一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件进行上传: 支 ...
- 【python-appium】手机一直提示重新安装settings unlock 输入法等 注释掉以下代码
注释掉目录:C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\android\android.js this.initUnic ...
- Scala数组小结
1.定长数组 定长数组:指长度不可变的数组Array. 第一种方式: 先声明一个数组,后初始化该数组: scala> val array = new Array[Double](5) array ...
- c++ 日志输出库 spdlog 简介（1）
参考文章: log库spdlog简介及使用 - 网络资源是无限的 - CSDN博客 http://blog.csdn.net/fengbingchun/article/details/78347105 ...
- 利用树莓派3和RTL-SDR V3搭建一个低成本的QRP小功率监测点
TUTORIAL: SETTING UP A LOW COST QRP (FT8, JT9, WSPR ETC) MONITORING STATION WITH AN RTL-SDR V3 AND R ...
- 通过用jQuery写一个页面，我学到了什么
概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...
- Spring Boot日志集成实战
Spring Boot日志框架 Spring Boot支持Java Util Logging,Log4j2,Lockback作为日志框架,如果你使用starters启动器,Spring Boot将使用 ...
- Python项目代码结构
目录结构组织方式 简要解释一下: bin/: 存放项目的一些可执行文件,当然你可以起名script/之类的也行. luffy/: 存放项目的所有源代码.(1) 源代码中的所有模块.包都应该放在此目录. ...
- python常用库 - NumPy 和 sklearn入门
Numpy 和 scikit-learn 都是python常用的第三方库.numpy库可以用来存储和处理大型矩阵,并且在一定程度上弥补了python在运算效率上的不足,正是因为numpy的存在使得py ...