首页 > 代码库 > jQuery 简易3D按钮效果
jQuery 简易3D按钮效果
<%@ 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=http://www.mamicode.com/"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; width: 300px; background-color: #FFC125; border-radius: 5px; } .dbback { top: 300px; position: relative; margin: 0 auto; background-color: #CDC9C9; height: 40px; width: 300px; border-radius: 5px; } .d1 { border-radius: 5px; margin-left: 5px; margin-top: 9px; float: left; height: 27px; width: 27px; background-color: #CDC9C9; } .d2 { text-align: center; line-height: 27px; color: white; border-radius: 5px; margin-top: -5px; height: 27px; width: 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"); }); </script>
jQuery 简易3D按钮效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。