幸运之轮：选择合适的 DIV

【问题标题】：Wheel of Luck: Select Appropriate DIV幸运之轮：选择合适的 DIV
【发布时间】：2016-01-19 18:17:34
【问题描述】：

我在幸运之轮游戏中需要其他帮助。我需要在 6 个 div 中选择 3 个 DIV。但是如果我如下图所示选择 div 会发生什么，它将分别选择 6 No DIV 而不是 5 或 1。我在下面的 sn-p 中使用了代码。

// replacement for localStorage to get snippet working
localStorageX = {
  dic: {},
  setItem: function(key, val) {
    localStorageX.dic[key] = val;
  },
  getItem: function(key) {
    return localStorageX.dic[key];
  },
}

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0,
        is_spinning = 0;

$(document).ready(function () {

    /*WHEEL SPIN FUNCTION*/
    $('#spin').click(function () {
        //add 1 every click
        if (is_spinning) {

            return false;
        }
        ;
        is_spinning = 1;
        clicks++;

        /*multiply the degree by number of clicks
         generate random number between 1 - 360,
         then add to the new degree*/
        var newDegree = degree * clicks;
        var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
        totalDegree = newDegree + extraDegree;

        var win_num = 6 - Math.floor((totalDegree % 360 + 30) / 60);

        /*let's make the spin btn to tilt every
         time the edge of the section hits
         the indicator*/
        $('#wheel .sec').each(function () {
            var t = $(this);
            var noY = 0;

            var interval = parseInt(t.data('interval'));
            if (interval > 0) {
                clearInterval(interval);
                t.data('interval', '');
            }

            t.data('interval', setInterval(function () {

                var aoY = t.offset().top;
                $("#txt").html(t.html());
                console.log(aoY);

                /*23.7 is the minumum offset number that
                 each section can get, in a 30 angle degree.
                 So, if the offset reaches 23.7, then we know
                 that it has a 30 degree angle and therefore,
                 exactly aligned with the spin btn*/
                if (aoY < 23.89) {
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () {
                        $('#spin').removeClass('spin');
                    }, 100);
                }
            }, 10));

            $('#inner-wheel').css({
                'transform': 'rotate(' + totalDegree + 'deg)'
            });

            noY = t.offset().top;

        });

        setTimeout(function () {
            $('#wheel .sec').each(function () {
                var t = $(this);
                var interval = parseInt(t.data('interval'));
                if (interval > 0) {
                    clearInterval(interval);
                    t.data('interval', '');
                }
            });
            $("#txt").html($('#wheel div.sec:nth-child(' + win_num + ')').html());
        }, 6100);
        $("#spin_disable").removeClass("disable");
    });
    obj = [];
    localStorageX.setItem("selected", JSON.stringify(obj));
    var inc = 1;
    $('#wheel .sec').click(function (e)
    {
        var obbj = $(this);
        var selected  = localStorageX.getItem("selected");

        var obj = [];
        if(selected){
            obj= JSON.parse(selected);  
        }
        var SelectedNumber = obbj[0].textContent;
        var compare = $.inArray( SelectedNumber, obj);
        if(compare < 0){
            if(obj.length <= 2){
                $(this).addClass('myApp');
                if (obj.length == 3)
                {
                    $("#spin_disable").addClass("disable");
                }
                obj.push(SelectedNumber);
                localStorageX.setItem("selected",JSON.stringify(obj)); 
            }else{
                alert("3 selected");
            }
        }else{
            var removeItem = obbj[0].textContent;
            obj = jQuery.grep(obj, function(value) {
              return value != removeItem;
            });
            $(this).removeClass('myApp');
            localStorageX.setItem("selected",JSON.stringify(obj));
        }
    });
});//DOCUMENT READY
*{	margin:0;	padding:0; }

body{
    background:#eaeaea;
    color:#fff;
    font-size:18px;
    font-family: 'Exo 2', sans-serif;
}

a{
    color:#34495e;
}




/*WRAPPER*/
#wrapper{
    margin: 40px auto 0;
    width:266px;
    position:relative;
}

#txt{
    color:#000;
}


/*WHEEL*/
#wheel{
    width:250px;
    height:250px;
    border-radius:50%;
    position:relative;
    overflow:hidden;
    border:8px solid #fff;
    box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
    transform: rotate(0deg);
}

#wheel:before{
    content:'';
    position:relative;
    /*	border:4px solid rgba(0,0,0,0.1);*/
    width:242px;
    height:242px;
    border-radius:50%;
    z-index:1000;
}

#inner-wheel{
    width:100%;
    height:100%;

    -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
    -moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
    -o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
    -ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
    transition:         all 6s cubic-bezier(0,.99,.44,.99);
}

#wheel div.sec{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 70px 0;
    border-color: #19c transparent;
    transform-origin: 75px 129px;
    left:50px;
    top:-4px;
    opacity:1;
}

#wheel div.sec:nth-child(1){
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    border-color: #d4d4d4 transparent;
}
#wheel div.sec:nth-child(2){
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    border-color: #d4d4d4 transparent;
}
#wheel div.sec:nth-child(3){
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    border-color: #d4d4d4 transparent;
}
#wheel div.sec:nth-child(4){
    transform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    border-color: #d4d4d4 transparent;
}
#wheel div.sec:nth-child(5){
    transform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    border-color: #d4d4d4 transparent;
}
#wheel div.sec:nth-child(6){
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    border-color: #d4d4d4 transparent;
}


#wheel div.sec .fa{
    margin-top: -100px;
    color: rgba(0,0,0,0.2);
    position: relative;
    z-index: 10000000;
    display: block;
    text-align: center;
    font-size:36px;
    margin-left:-15px;

    text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}






#spin{
    width:68px;
    height:68px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-34px 0 0 -34px;
    border-radius:50%;
    box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
    z-index:1000;
    background:#fff;
    cursor:pointer;
    font-family: 'Exo 2', sans-serif;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


#spin:after{
    content:"SPIN";
    text-align:center;
    line-height:68px;
    color:#CCC;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
    position: relative;
    z-index: 100000;
    width:68px;
    height:68px;
    display:block;
}

#spin:before{
    content:"";
    position:absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #ffffff transparent;
    top:-12px;
    left:14px;
}

#inner-spin{
    width:54px;
    height:54px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-27px 0 0 -27px;
    border-radius:50%;
    background:red;
    z-index:999;
    box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;

    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#spin:active #inner-spin{
    box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

#spin:active:after{
    font-size:15px;
}



#shine{
    width:250px;
    height:250px;
    position:relative;
    top:0;
    left:0;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


    opacity:0.1;

}



/*ANIMATION*/
@-webkit-keyframes hh {
    0%, 100%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50%{
        transform: rotate(7deg);
        -webkit-transform: rotate(7deg);
    }
}

@keyframes hh {
    0%, 100%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50%{
        transform: rotate(7deg);
        -webkit-transform: rotate(7deg);
    }
}

.spin {
    -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}
.myApp{
    border-color: blue transparent !important;
}
#spin_disable 	{  background: none;

                  border-radius: 50%;
                  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
                  cursor: pointer;
                  font-family: "Exo 2",sans-serif;
                  height: 68px;
                  left: 50%;
                  margin: -34px 0 0 -34px;
                  opacity: 1;
                  position: absolute;
                  top: 50%;
                  width: 68px;
                  z-index: 1001;}

#spin_disable.disable 	{ z-index:-111;}
<head>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Exo+2:900' rel='stylesheet' type='text/css'>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
      
    </head>

    <body>


        <div id="wrapper">

            <div id="wheel">
                <div id="inner-wheel">
                    <div class="sec" value="1"><span class="fa fa-bell-o"></span><span>1</span></div>
                    <div class="sec" value="2"><span class="fa fa-comment-o"></span><span>2</span></div>
                    <div class="sec" value="3"><span class="fa fa-smile-o"></span><span>3</span></div>
                    <div class="sec" value="4"><span class="fa fa-heart-o"></span><span>4</span></div>
                    <div class="sec" value="5"><span class="fa fa-star-o"></span><span>5</span></div>
                    <div class="sec" value="6"><span class="fa fa-lightbulb-o"></span><span>6</span></div>
                    <div id="spin_disable"></div>
                </div>

                <div id="spin">
                    <div id="inner-spin"></div>
                </div>

                <div id="shine"></div>
            </div>


            <div id="txt"></div>
        </div>
    </body>

【问题讨论】：

标签： javascript jquery html css


【解决方案1】：

不要使用div 或任何其他本质上是正方形的元素，您应该使用具有 6 个区域的图像映射，以免出现任何重叠：

http://www.w3schools.com/tags/tag_map.asp

这是一个有用的工具，您可以使用它来创建：

https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

示例（悬停在 1 或 6 上）：

area {
  background-color: rgba(0, 255, 24, 0.4);
}
<img src="http://i.stack.imgur.com/ksl2d.png" alt="" usemap="#map" />
<map name="map">
  <area shape="poly" coords="194, 27, 217, 43, 232, 59, 243, 76, 252, 97, 258, 126, 167, 129, 162, 114, 155, 108, 149, 103" />
  <area shape="poly" coords="71, 27, 91, 17, 120, 10, 148, 9, 180, 16, 188, 20, 145, 102, 132, 98, 123, 101, 113, 107" />
</map>

对于您的，您可以将图像替换为透明的png，然后映射区域点​​击以影响相关元素。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-04-27
    • 2017-07-05
    • 1970-01-01
    • 1970-01-01
    • 2017-10-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode