WeChat 공개 플랫폼 개발로 황금알 달성

황금알 깨뜨리기는 축하 행사, 비즈니스 프로모션, TV 예능 및 기타 행사에서 널리 사용되며 재미와 서스펜스가 현장 분위기를 빠르게 활성화할 수 있습니다. 마찬가지로 Golden Egg Smashing을 WEB 웹사이트에 적용하여 온라인 활동을 수행할 수도 있습니다. 이 기사에서는 jQuery와 PHP를 사용하여 WEB 황금알 깨기 프로그램을 구현하는 방법을 설명합니다.

준비

소품(재료), 즉 관련 사진 등을 준비해야 합니다. 황금알 사진, 깨진 달걀 사진, 깨진 꽃 사진, 망치 사진.

HTML

우리 페이지에서 보여주고 싶은 것은 황금알 깨기 플랫폼입니다. 플랫폼에는 1, 2, 3이라는 숫자가 적힌 황금알 3개와 망치가 있습니다. . 다음과 같은 HTML 코드를 구성합니다:

<p class="egg"> 
    <ul class="eggList"> 
        <p class="hammer" id="hammer">锤子</p> 
        <p class="resultTip" id="resultTip"><b id="result"></b></p> 
        <li><span>1</span><sup></sup></li> 
        <li><span>2</span><sup></sup></li> 
        <li><span>3</span><sup></sup></li> 
    </ul> </p>

위 코드에서 .hammer는 망치를 배치하는 데 사용되고 .resultTip은 이후 결과를 표시하는 데 사용됩니다. 계란 깨기, 즉 상품이 있든 없든 CSS를 사용하여 효과를 장식합니다.

CSS

.egg{width:660px; height:400px; margin:50px auto 20px auto;} 
.egg ul li{z-index:999;} 
.eggList{padding-top:110px;position:relative;width:660px;} 
.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px; 
height:187px;cursor:pointer;position:relative;margin-left:35px;} 
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0; 
 font-size:42px; font-weight:bold} 
.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;} 
.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px;  
height:181px;top:-36px;left:-34px;z-index:800;} 
.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute;  
text-indent:-9999px;z-index:150;left:168px;top:100px;} 
.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px;  
left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;} 
.resultTip b{font-size:14px;line-height:24px;}

위 코드에 따르면 페이지에서 완전한 황금알 깨짐 장면을 볼 수 있습니다. , 고객이 여전히 IE6을 사용하는 경우 이 문서에서 다루지 않는 png 그림의 투명도를 처리해야 할 수도 있습니다.

jQuery

다음에는 황금알을 깨고, 달걀을 깨고, 승리 결과를 표시하는 전 과정을 jQuery 코드를 사용해 구현해 보겠습니다. 물론, 이전 규칙은 jQuery로 구현된 예제 프로그램의 경우 먼저 jQuery 라이브러리 파일을 로드해야 한다는 것입니다.

먼저 마우스가 황금알을 향해 미끄러질 때, 황금알을 깨뜨릴 때 사용하는 망치는 황금알의 오른쪽 상단에만 있을 텐데, position()을 이용해서 위치를 잡을 수 있습니다. .

rreee

그 다음, 황금알을 클릭하면 망치를 휘둘러 황금알을 맞추는 과정이다. 먼저 클릭 시 황금알에 숫자를 숨긴 다음 사용자 정의 함수 eggClick()을 호출합니다.

$(".eggList li").hover(function() { 
    var posL = $(this).position().left + $(this).width(); 
    $("#hammer").show().css('left', posL); 
})

마지막으로 사용자 정의 함수 eggClick()에서 jQuery의 $.getJSON 메서드를 사용하여 ajax 요청을 백그라운드 data.php로 보내고 background php 이 프로그램은 상금 할당을 처리하고 우승 결과를 반환합니다. animate()를 사용하여 망치를 부수는 애니메이션을 구현하고, 망치의 상단과 왼쪽 위치를 변경하여 간단한 애니메이션 효과를 구현합니다. 그리고 나서 승리 결과는 당신의 승리 여부가 당신의 행운과 배경 보상에 의해 설정된 승리 확률에 달려 있음을 보여줍니다. 황금알 깨기 함수 eggClick()

$(".eggList li").click(function() { 
    $(this).children("span").hide(); 
    eggClick($(this)); 
});

의 코드를 살펴보겠습니다. 황금알 깨기 프로그램을 보다 현실적으로 홈페이지에 접목시키기 위해서는, 달걀을 만들기 전에 회원 자격을 확인하고, 달걀을 부수는 횟수를 제한하고, 경품을 받은 후 연락처를 남기는 등의 조치를 취할 수 있습니다. 이 모든 것은 웹사이트의 필요에 따라 다릅니다.

PHP

data.php는 프런트 엔드에서 보낸 ajax 요청을 처리하여 확률 알고리즘을 사용하여 설정된 당첨 확률에 따라 당첨 결과를 json 형식으로 출력합니다. <code class="php"> <br><br>

function eggClick(obj) { 
    var _this = obj; 
    $.getJSON("data.php",function(res){//ajax请求 
        _this.unbind('click'); //解除click 
        $(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185}); 
        $(".hammer").animate({//锤子动画 
            "top":_this.position().top-25, 
            "left":_this.position().left+125 
            },30,function(){ 
                _this.addClass("curr"); //蛋碎效果 
                _this.find("sup").show(); //金花四溅 
                $(".hammer").hide();//隐藏锤子 
                $('.resultTip').css({display:'block',top:'100px',left:_this.position(). 
                left+45,opacity:0}) 
                .animate({top: '50px',opacity:1},300,function(){//中奖结果动画 
                    if(res.msg==1){//返回结果 
                        $("#result").html("恭喜，您中得"+res.prize+"!"); 
                    }else{ 
                        $("#result").html("很遗憾,您没能中奖!"); 
                    } 
                });     
            } 
        ); 
    }); 
}

확률을 설정하면 태블릿을 치는 것을 알 수 있습니다. 맞을 확률은 3%, 놓칠 확률은 50%이다.

WeChat 공개 플랫폼 개발 및 황금알 깨기 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!