jQuery 简易3D按钮效果

时间：2017-06-05 10:14:29 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：point jquery char set har doctype org cti ack

技术分享

<%@ 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;
            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按钮效果

标签：point jquery char set har doctype org cti ack

原文地址：http://www.cnblogs.com/zhangxin4477/p/6943261.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行