zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    字符数组初始化
    makefile学习笔记
    convert between char* and std::string
    mysql 学习笔记(二)
    面试中的Singleton (转)
    由谈退格键的实现来学习字符编码
    mysql 学习笔记(一)
    Eclipse插件的安装方法
    Http状态码
    net use命令
  • 原文地址:https://www.cnblogs.com/zhangxin4477/p/6943261.html
Copyright © 2011-2022 走看看