Beispiel einer *Lotterie-HTML-Tutorial-php.cn

Beispiel einer *Lotterie

PHP中文网

Freigeben： 2016-08-15 16:49:51

Original

2246 Leute haben es durchsucht

Nachdem ich den Übergangseffekt gelernt habe, habe ich begonnen, mir der Erstellung von Animationseffekten bewusst zu werden, und ich werde einige coole Gadgets implementieren.

Das Hinzufügen von Übergangsanimationseffekten zu einer Webseite wird dafür sorgen, dass die Leute gut aussehen Schön, nicht steif, interessant, Animation ist einer der Hauptausdrucke der Schönheit einer Webseite

, hier ist ein Beispiel für eine Lotterie, die einen Übergangseffekt verwendet.

Zuerst kommen die Renderings:

Die Implementierung erfordert die Verwendung von etwas JS-Code.

Erforderliches Bild:

Dieses Bild ist der Speicherort von pointer.png.

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

Nach dem Login kopieren

这张是turntable.png位置的。

Nach dem Login kopieren

Diese drei Bilder brauchst du einfach Speichern Sie dies. Importieren Sie einfach drei Bilder. Wenn nicht, ändern Sie es bitte in den entsprechenden Bildnamen und fügen Sie es in dieselbe Datei ein.

Code:

<!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>

Nach dem Login kopieren

Es gibt nicht viele CSS- und HTML-Codes, die hauptsächlich dazu dienen, Übergangseinstellungen zu erreichen und die Positionierung zu verwenden, um eine Kaskadierung zu erreichen, sodass Elemente vom Dokumentfluss getrennt werden können. Der JS-Code dient zum Erhalten von Klicks auf Elemente und

Ereignisse, und der Klickzeiger dreht sich, daher müssen Sie dem Zeiger ein Klickereignis hinzufügen und dann feststellen, ob die Drehung gestoppt wurde. Wenn nicht, klicken Sie und die Funktion ratating() kann nicht aufgerufen werden > Die Funktion führt die Drehung des Drehtellers durch und bestimmt, wo der Zeiger stoppt. Anschließend wird der entsprechende Inhalt angezeigt. Der Prozess der Drehung in der Funktion besteht darin, die Elemente des Drehtellers abzurufen und dann die Attribute von mit js zu steuern css

- transform: rotation() Wir haben dieses Attribut nicht direkt in CSS verwendet. Erzielt es den Effekt der Rotation? Es wird durch die Verwendung von

zusammen mit dem Pseudoklassenselektor implementiert: Hover- und Übergangsattribute. Da CSS keine numerischen Operationen und Mausklicks implementieren kann, lassen Sie js CSS-Attribute implementieren und steuern, um eine Klickrotation zu erreichen. Die Verwendung von Timern

wird jedoch vorerst nicht besprochen. Die Idee besteht darin, mit js numerische Operationen, Mausklicks und CSS-Attributsteuerung zu implementieren, um den Rotationseffekt zu erzielen.

Math.random() ist die Generierung von Zufallszahlen und Math.floor() rundet ab.

Ein weiteres Beispiel, das heute jemand gesagt hat:

Pure CSS-Dropdown-Menü:

Rendering

Die Implementierung ist sehr einfach und besteht hauptsächlich aus der Verwendung von Hover- und Übergangsattributen.

Code:

<!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>

Nach dem Login kopieren

Da ul ein Teleskopobjekt ist, muss es vom Dokumentenfluss getrennt werden, was keine Auswirkungen hat Praktikabilität, geben Sie ihm einfach eine absolute Position.

Das Obige ist der Inhalt der Roulette-Lotterie im Beispiel. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!