※抽選例-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

※抽選例

PHP中文网

Aug 15, 2016 pm 04:49 PM

トランジション効果を学んだので、アニメーション効果を作成するという意識を持ち始めたので、いくつかのクールなガジェットを実装してみます

Web ページにトランジションアニメーション効果を追加すると、人々が堅苦しくならずに美しく見えます。興味深いヘッダー、アニメーションは Web ページの美しさを表す主な表現の 1 つです。これはトランジション効果を使用した宝くじの例です。

まずレンダリングです:

これを実装するには、いくつかの JS コードを使用する必要があります。

必要な画像:

この画像は pointer.png の場所です。

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

这张是turntable.png位置的。

これを実装したい場合は、これらの 3 つの写真を保存してインポートするだけです。そうでない場合は、対応する画像名に変更して同じファイルに入れてください。

コード:

<!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="/static/imghwm/default1.png"  data-src="pointer.png"  class="lazy"   alt="pointer">
        <img src="/static/imghwm/default1.png"  data-src="turntable.png"  class="lazy"   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 コード要素のクリックと

イベントを取得するため、ポインターをクリックすると回転するため、ポインターにクリックイベントを追加し、回転が停止したかどうかを判断する必要があります。この

関数は、クリックしても関数 rateting() を呼び出しません。回転テーブルを実行して、ポインタが停止する位置を決定し、対応するコンテンツをポップアップ表示します。ターンテーブルを作成し、js を使用して css のプロパティを制御します -transform:rotate()。CSS でこの属性で回転効果を直接実現できますか?

を疑似クラスセレクター: hover 属性とtransition 属性とともに使用して実装されます。CSS では数値操作とマウスクリックを実装できないため、クリック回転機能を実現するために CSS 属性を実装および制御するために js が使用されます。当面のタイマーの使用については、js を使用して数値操作、マウスクリック、および CSS 属性制御を実装して回転効果を実現するという考えです。

Math.random() は乱数の生成、Math.floor() は切り捨てです。

今日誰かが言った別の例:

純粋な CSS ドロップダウンメニュー:

レンダリング

これの実装は非常に簡単で、主にホバー属性とトランジション属性を使用します。

コード:

<!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 中国語 Web サイト (www.php.cn) に注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles