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 ...
随机推荐
- 2019.02.21 bzo1038: [ZJOI2008]瞭望塔（半平面交）
传送门 题意:给出一个nnn个点的轮廓,要求找一个高度最小的点使得它能够看见所有拐点. 思路:之间建半平面交然后取半平面交上的每个交点和每个轮廓更新答案即可. 代码: #include<bits ...
- Spring-Cloud之Eureka排坑之旅
1 快速demo 1.0 环境说明 Intelli IDEA+Spring Boot 1.1 新建工程chap52(通过New Project->Spring Initializer-> ...
- 完整的SOPC开发流程体验
课程目标:学习并掌握完整的SOPC开发流程. 开发环境:Quartus15.1 学习内容:1.使用QSYS工具建立能够运行流水灯项目的NIOS II处理器系统 2.在quartus ii中添加NIOS ...
- pyinstaller打包程序 带图片
首选说一下,这种打包方式只能在本电脑上使用运行正常 准备:.py文件:你的程序 gif文件:你要用的图片 第一步: 在上面文件所在目录打开cmd 输入 pyi-makespec FP.py 会生成一个 ...
- less的功能和介绍
在全新的css中,经过程序员们的开发和努力.又打造了全新的less样式表的全新界面,只需引入外部样式表即刻套用,加上了函数定义和取值.大大的降低了代码的书写量.也更加方便程序员的调用和修改!
- Visual Studio Code 写Python 代码
最近在博客园新闻里面看到微软发布的Visual Studio Code 挺好用的,现在在学习Python,查看官网发布的VSCode 是支持Python代码,自己试着安装用一下,下面是我的安装以及配置 ...
- MySQL性能调优与诊断
* 本篇随笔为<涂抹MySQL>一书的阅读摘抄,详细请查看正版书籍 关键性指标 IOPS(Input/Output operations Per Second) 每秒处理的I/O请求次数 ...
- Objective-C优缺点
优点: 1:Category,使用category可以在不改变原来类的同时为类增加新的方法或者重写原来类的方法实现(使用runtime方法还可以在分类中实现方法交换和添加属性操作) 2:运行时 动态识 ...
- Windows 系统 IP 和端口的相关检测命令
查看本机IP地址 查看自己电脑的ip,使用 ipconfig 命令 ipconfig 检测指定IP是否联通 检测某个ip是否可以连通,直接使用 ping 命令 ping 219.148.111.212 ...
- python循环语句详细讲解
想必大家都知道python循环语句吧,可以python循环语句有多种,比如for循环.while循环.if.else等等, 我们可以通过设置条件表达式永远不为 false 来实现无限循环,实例如下 ...