小特效【较完善的滑动下拉菜单】【购物车加减器】
较完善的菜单样式
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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="lianxi/jquery-1.7.2.min.js"></script> <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: 49px; overflow: hidden; /*超出部分隐藏*/ } .div3 { width: 100%; height: 45px; background-color: yellow; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1"> <span>111</span> <div class="div2"> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>333</span> </div> <div class="div3"> <span>333</span> </div> </div> </div> <div class="div1"> <span>111</span> <div class="div2"> <div class="div3"> <span>333</span> </div> </div> </div> <div class="div1"> <span>111</span> <div class="div2"> <div class="div3"> <span>333</span> </div> <div class="div3"> <span>333</span> </div> <div class="div3"> <span>333</span> </div> <div class="div3"> <span>333</span> </div> </div> </div> <div class="div1"> <span>111</span> <div class="div2"> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> <div class="div3"> <span>222</span> </div> </div> </div> <div class="div1"> <div class="div2"></div> </div> </form> </body> </html> <script type="text/javascript"> $(".div1").hover( function () { var hei = $(this).children(".div2:eq(0)").css('height', 'auto').height()//div 默认用文字撑起来的高度 $(this).children(".div2:eq(0)").css('height', '0px'); //div 最小的高度 var aaa = $(this).children(".div2:eq(0)"); aaa.stop().animate({ height: hei }, 500, function () { }); }, function () { var aaa = $(this).children(".div2:eq(0)"); aaa.stop().animate({ height: "0px" }, 500, function () { }); }); $(".div3").hover( //鼠标移入分选项，选项变色 function () { $(this).css("background-color", "green"); }, function () { $(this).css("background-color", "yellow"); }); </script>
购物车加减器
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!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> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="-" id="btn_jian" /> <asp:TextBox ID="TextBox1" runat="server" Style="width: 30px;" Text="1"></asp:TextBox> <input type="button" value="+" id="btn_jia" /> <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html> <script type="text/javascript"> document.getElementById("btn_jia").onclick = function () { var s = document.getElementById("TextBox1"); s.value = parseInt(s.value) + 1; } document.getElementById("btn_jian").onclick = function () { var s = document.getElementById("TextBox1"); if (s.value <= 1) { return; } s.value = parseInt(s.value) - 1; } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click; } void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; } }
