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 ...
随机推荐
- Codeforces Round #548 (Div. 2) C dp or 排列组合
https://codeforces.com/contest/1139/problem/C 题意 一颗有n个点的树,需要挑选出k个点组成序列(可重复),按照序列的顺序遍历树,假如经过黑色的边,那么这个 ...
- Codeforces Round #539 (Div. 2) 异或 + dp
https://codeforces.com/contest/1113/problem/C 题意 一个n个数字的数组a[],求有多少对l,r满足\(sum[l,mid]=sum[mid+1,r]\), ...
- javascript 取整,取余数 math方法
1.丢弃小数部分,保留整数部分 parseInt() 函数可解析一个字符串,并返回一个整数. parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. rad ...
- Web API使用HttpResponseMessage与HttpResponseException的差异 HttpResponseMessage 返回类型
在 Web API 中提供了 HttpResponseMessage 与 HttpResponseException 用于处理返回讯息,HttpResponseMessage 用于返回一个来自于客户端 ...
- Python学习第2章
1.字符串: python中创建字符串我们可以使用引号''或"'. python访问子字符串,可以使用方括号来截取字符串: var="hello world!" var2 ...
- CPP之内存分配
new & delete expression 1. Introduction A new expression allocates and constructs an object of a ...
- Runtime之实例总结
通过前面几篇对Runtime的讲解,本篇汇总一下Runtime实际中常用的一些场景. 1.获取类的基本信息 获取类名: const char *className = class_getName(cl ...
- jQuery应用实例2：表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- 有没有人曾告诉你，你的SQL又报错了？[开发篇]
引语:线上运行的真实环境总是变幻莫测,明明你在本地测试的时候各种情况都是OK得不要不要的,也许你还在为自己某个地方炫酷的效果以及神奇的设计感到激动不已!但是,到线上以后,他就会偶尔跟抽风一样的跟你sa ...
- python中两种栈实现方式的性能对比
在计算机的世界中,同一个问题,使用不同的数据结构和算法实现,所使用的资源有很大差别 为了方便量化python中算法的资源消耗,对性能做测试非常有必要,这里针对stack做了python语言 下的性能分 ...