<%@ 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> <script src="JS/jquery-1.7.2.min.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; box-sizing: border-box; } .db { z-index: 100; position: absolute; margin: 0 auto; top: -5px; height: 40px; 300px; background-color: #FFC125; border-radius: 5px; } .dbback { top: 300px; position: relative; margin: 0 auto; background-color: #CDC9C9; height: 40px; 300px; border-radius: 5px; } .d1 { border-radius: 5px; margin-left: 5px; margin-top: 9px; float: left; height: 27px; 27px; background-color: #CDC9C9; } .d2 { text-align: center; line-height: 27px; color: white; border-radius: 5px; margin-top: -5px; height: 27px; 27px; background-color: #FF4500; cursor: pointer; } </style> </head> <body> <form id="form1" runat="server"> <div> <div class="dbback"> <div class="db"> <div class="d1"> <div class="d2">1</div> </div> <div class="d1"> <div class="d2">2</div> </div> <div class="d1"> <div class="d2">3</div> </div> <div class="d1"> <div class="d2">4</div> </div> <div class="d1"> <div class="d2">5</div> </div> </div> </div> </div> </form> </body> </html> <script type="text/javascript"> $(".d2").mousedown(function () { $(this).css("marginTop", "0px"); }); $(".d2").mouseup(function () { $(this).css("marginTop", "-5px"); });
//写这个鼠标移出代码是为了避免按下的时候移出div判断区域造成按钮不弹起效果
$(".d2").mouseleave(function () { $(this).css("marginTop", "-5px"); });
</script>