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 ...
随机推荐
- PowerShell 使用.NetFramework
我们都知道,由于PowerShell是基于.NETFramework建立的所以它能够具备访问.NET的能力,因为.NET提供了庞大的数据类库,所以我们可以很好的使用PowerShell去完成一些Pow ...
- Nginx Redirect Websocket
I want to redirect my websocket to another server. As we known, nginx command rewrite or redirect ca ...
- Html5与Css3知识点拾遗（三）
文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...
- 深度搜索优先（全排列）//本内容来自《啊哈！算法》或者英文名《Aha!Algorithms》）
package Mypackage; import java.util.Scanner; public class 全排列{ static int a[]=new int[10]; static ...
- ASP.NET MVC下使用AngularJs语言(八)：显示html
在Angularjs显示html文本,如果按照一般处理它.它只能页中显示没经解释文本. 在ASP.NET MVC添加一个控制器: 创建angularjs控制器: pilotApp.controller ...
- Dispatch Queue 之 dispatch_sync

- LeetCode:151_Reverse Words in a String | 字符串中单词的逆反 | Medium
题目:Reverse Words in a String Given an input string, reverse the string word by word. For example, Gi ...
- Python爬虫——selenium模块
selenium模块介绍 selenium最初是一个测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览 ...
- 脚手架vue-cli系列一：安装与规范
我很喜欢Vue的一个重要原因就是因为它的vue-cli,这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境,并不像Angular和React那样要在Yoman上找 ...
- C# 获取媒体文件播放时长
引用: Interop.Shell32.dll 方法: /// <summary> /// 获取媒体文件播放时长 /// </summary> /// <param na ...