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: 0 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>1</p> </div> <div class="thc-count-top"> <p>1</p> <p>2</p> </div> <div class="thc-count-top"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <div class="thc-count-top"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</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 }, 500) }, function () { $(this).animate({ height: "50" }, 500) }); </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: 100%; 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" }, 500, function () { aaa.css("background-color", "blue"); //回调函数，动画执行完后执行 背景色变为绿色 }); }); $(".div1").mouseout(function () { var aaa = $(this).children(".div2:eq(0)"); //stop() 停止之前所有的动画--消除动画积累 aaa.stop().animate({ height: "0px" }, 500, 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" }, 500); }); $("#div1").mouseout(function () { $(this).animate({ backgroundColor: "#0171c2", color: "yellow" }, 500); }); // 要引入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: 50%; margin-left: -170px; position: fixed; top: -500px; border-radius: 10px; z-index: 100; /*transform: rotate(-15deg); -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg);*/ } #thc_top { background-color:#808080; height: 40px; font-size: 20px; font-weight: bold; text-align: center; line-height: 40px; border-radius: 10px 10px 0 0; } #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: 50%; margin-left: -50px; font-size: 22px; cursor: pointer; } #thc-bottom:hover { background-color: red; } #zhezhao /*大幕遮罩样式*/ { height: 100%; width: 100%; background-color: black; display: none; position: fixed; top: 0px; left: 0px; opacity: 0.3; z-index: 10; } </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" }, 500).animate({ top: "90px" }, 100).animate({ top: "100px" }, 300); $("#zhezhao").css("display", "block"); } //弹窗收起 $("#thc-bottom").click(function () { $("#thc_tc").stop().animate({ top: "110px" }, 100).animate({ top: "-500px" }, 400, function () { $("#zhezhao").css("display", "none"); }); }); </script>
