*복권의 예-HTML 튜토리얼-php.cn

*복권의 예

PHP中文网

풀어 주다： 2016-08-15 16:49:51

원래의

2246명이 탐색했습니다.

이제 전환 효과를 배웠으니 애니메이션 효과 제작에 대한 인식이 생기기 시작했고, 멋진 가젯을 구현해 보겠습니다.

웹 페이지에 전환 애니메이션 효과를 추가하면 사람들이 돋보일 것입니다. 아름답고, 뻣뻣하지 않고, 흥미롭고, 애니메이션은 웹페이지의 아름다움을 보여주는 주요 표현 중 하나입니다

, 여기 전환 효과를 사용한 복권의 예가 있습니다.

먼저 렌더링이 나옵니다.

이를 구현하려면 일부 js 코드를 사용해야 합니다.

필수 사진 :

이 사진은 포인터.png 위치입니다.

turntable-bg.jpg这张是背景图，在背景位置。

로그인 후 복사

这张是turntable.png位置的。

로그인 후 복사

구현하려면 이 세 장의 사진만 있으면 됩니다. 직접 저장하세요. 세 장의 사진을 가져오시면 됩니다. 그렇지 않은 경우 해당 사진 이름으로 변경하여 동일한 파일에 넣으십시오.

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <!-- 这里是css部分 -->
    <style>
        #bg{
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(turntable-bg.jpg) no-repeat;
            position: relative;
        }
        img[src^="pointer"]{
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        img[src^="turntable"]{
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
            transition: all 4s;
        }
        
    </style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
    <div id="bg">
        <img src="pointer.png" alt="pointer">
        <img src="turntable.png" alt="turntable">
    </div>
    <!-- 这里是js部分 -->
    <script>
        var oPointer=document.getElementsByTagName("img")[0];
        var oTurntable=document.getElementsByTagName("img")[1];
        var cat=51.4;
        var num=0;
        var offOn=true;
        document.title="";
        
        oPointer.onclick=function(){
            if(offOn){
            oTurntable.style.transform="rotate(0deg)";
            offOn=!offOn;
            ratating();
            }
        }

        function ratating(){
            var timer=null;
            var rdm=0;
            clearInterval(timer);
            timer=setInterval(function(){
                if(Math.floor(rdm/360)<3){
                    rdm=Math.floor(Math.random()*3600);    
                }else{
                    oTurntable.style.transform="rotate("+rdm+"deg)";
                    clearInterval(timer);
                    setTimeout(function(){
                        offOn=!offOn;
                        num=rdm%360;
                        if(num<=cat*1){
                        alert("4999元");
                        }else if(num<=cat*2){
                            alert("条50元");
                            }else if(num<=cat*3){
                            alert("10元");
                            }else if(num<=cat*4){
                            alert("5元");
                            }else if(num<=cat*5){
                            alert("免息服务");
                            }else if(num<=cat*6){
                            alert("提交白金");
                            }else if(num<=cat*7){
                            alert("未中奖");
                            }
                    },4000);
                }    
            },30);    
        }
    </script>
</body>
</html>

로그인 후 복사

주로 전환 설정을 달성하고 위치 지정을 사용하여 계단식을 달성하기 위한 CSS 및 HTML 코드가 많지 않으므로 js 코드는 요소 및

에 대한 클릭을 얻는 것입니다. 이벤트가 발생하면 클릭 포인터가 회전하므로 포인터에 클릭 이벤트를 추가한 다음 회전이 중지되었는지 확인해야 합니다. 그렇지 않으면 클릭하면ratating() 함수를 호출할 수 없습니다. > 함수는 턴테이블의 회전을 수행하고 포인터가 멈추는 위치를 결정한 후 해당 내용이 팝업되며 함수에서 회전을 구현하는 프로세스는 턴테이블의 요소를 가져온 다음 js를 사용하여 속성을 제어하는 것입니다. css

- 변환: 회전(). CSS에서는 이 속성을 직접 사용하지 않았습니다. 회전 효과를 얻을 수 있나요? CSS는 숫자 연산 및 마우스 클릭을 구현할 수 없으므로, 이 기능을 위해 CSS 속성을 구현하고 제어하도록 합니다. 그러나 타이머

사용에 대해서는 당분간 논의하지 않겠습니다. js를 사용하여 숫자 연산, 마우스 클릭 및 CSS 속성 제어를 구현하여 회전 효과를 얻는 것입니다.

Math.random()은 난수 생성이고, Math.floor()는 내림됩니다.

오늘 누군가가 말한 또 다른 예:

순수 CSS 드롭다운 메뉴:

렌더링

이 구현은 매우 간단하며 주로 hover 및 전환 속성을 사용합니다.

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0;
            padding:0;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        #container{
            width: 100px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        #container ul{
            list-style: none;
        }
        #container span{
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        #container ul{
            height: 0;
            width: 100px;
            overflow: hidden;
            transition: all 1s;
            position: absolute;
            top: 30px;
            left: 0px;
        }
        #container:hover ul{
            height: 330px;
        } 
        #container ul li{
            background: #eee;
            margin-top: 3px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <span>移动</span>
        <ul>
            <li>这里有1</li>
            <li>这里有2</li>
            <li>这里有3</li>
            <li>这里有4</li>
            <li>这里有5</li>
            <li>这里有6</li>
            <li>这里有7</li>
            <li>这里有8</li>
            <li>这里有9</li>
            <li>这里有10</li>
        </ul>
    </div>
</body>
</html>

로그인 후 복사

ul은 확장 가능한 개체이므로 문서 흐름에서 분리되어야 하며 이는 영향을 미치지 않습니다. 실용성. 레이아웃, 절대 위치를 지정하십시오.

위 예시에 나온 룰렛복권 내용은 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!