Vue が携帯電話番号宝くじの上下スクロールアニメーションのサンプル共有を実装
この記事では主に携帯電話番号抽選の上下スクロールアニメーションをVueで実装した例を紹介します。一定の参考価値がありますので、興味のある方は参考にしていただければ幸いです。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" rel="external nofollow" />
<style type="text/css">
.in-out-translate-demo-wrapper {
position: relative;
height: 58px;
}
.in-out-translate-demo-wrapper button {
position: absolute;
}
.in-out-translate-fade-enter-active,
.in-out-translate-fade-leave-active {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
.in-out-translate-fade-enter,
.in-out-translate-fade-leave-active {
opacity: 0;
}
.in-out-translate-fade-enter {
transform: translateX(54px);
-webkit-transform: translateX(54px);
-moz-transform: translateX(54px);
-o-transform: translateX(54px);
}
.in-out-translate-fade-leave-active {
transform: translateX(-54px);
-webkit-transform: translateX(-54px);
-moz-transform: translateX(-54px);
-o-transform: translateX(-54px);
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
transition: all .1s;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-o-transition: all .1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
opacity: 1;
}
.down-up-translate-fade-enter {
/*transform: translateY(40px);
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);*/
}
.down-up-translate-fade-leave-active {
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-o-transform: translateY(-50px);
}
.num {
/*position: relative;*/
width: 100%;
height: 50px;
overflow: hidden;
}
.num .span {
/*position: absolute;*/
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
float: left;
margin-right: 2px;
}
.num .span p {
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<p id="demo" class="demo">
<p class="in-out-translate-demo-wrapper mui-text-center">
<transition name="in-out-translate-fade">
<button v-if="show" v-on:click="start" key="start" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button>
<button v-else key="end" v-on:click="end" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button>
</transition>
</p>
<p class="num mui-text-center">
<p class="span">
<p>1</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="k">{{k}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="l">{{l}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
</p>
</p>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true,
i: 0,
j:0,
k: 0,
l: 0,
interval: null
},
methods: {
start: function() {
this.show = !this.show
var _this = this;
if(!this.interval) {
this.interval = setInterval(function() {
_this.i = Math.floor(Math.random() * 10);
_this.j = Math.floor(Math.random() * 10);
_this.k = Math.floor(Math.random() * 10);
_this.l = Math.floor(Math.random() * 10);
}, 10)
}
},
end: function() {
this.show = !this.show
clearInterval(this.interval)
this.interval = null
}
}
})
</script>
</body>関連する推奨事項:
PHP が jQuery と Mysql を使用して宝くじプログラムを実装する方法の例
PHP が宝くじの確率を計算するアルゴリズムを実装する方法 共有例
以上がVue が携帯電話番号宝くじの上下スクロールアニメーションのサンプル共有を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7642
15
1392
52
91
11
33
150
携帯電話の番号が空白になる理由は何ですか?
Feb 21, 2023 pm 02:26 PM
携帯電話番号が空の理由: 1. 携帯電話番号が相手によってブラックリストに登録されている; 2. 相手が電話転送機能を設定しており、転送された番号が通常とは異なる携帯電話番号範囲である11 桁の数字がランダムに押される; 3. 番号が間違っている; 4. 仮想番号; 5. 番号はキャンセルされており、回復凍結期間中である; 6. オペレーターのシステム障害により、ユーザーの携帯電話には空の番号が設定される地域および範囲の方法で; 7. 信号が良くありません; 8. 番号の形式が間違っています; 9. 携帯電話カードの故障; 10. 特殊な着信音。
携帯電話番号に何が登録されているか確認する方法「詳しく解説：携帯電話番号登録のAPP問い合わせ方法」
Feb 07, 2024 am 08:24 AM
あなたにもそのような経験があるかどうかはわかりませんが、あなたの携帯電話には、不可解なテキスト メッセージや、一部の Web サイトへの登録情報、その他の確認情報が頻繁に送信されます。実際、私たちの携帯電話番号は多くの見慣れない Web サイトに関連付けられている可能性があり、たとえあなたが知らなくても、今日私があなたに共有するのは、ワンクリックですべての見慣れない Web サイトのバインドを解除する方法を教えることです。ステップ 1: 番号サービス プラットフォームを開く この手法は非常に実用的です。手順は次のとおりです。WeChat を開き、検索ボックスのプラス アイコンをクリックし、[友達の追加] を選択して、検索するコード番号サービス プラットフォームを入力します。番号サービスプラットフォームというのがあるのですが、これはもちろん公的機関のもので、情報通信研究機構が立ち上げたもので、誰もがワンクリックで携帯電話番号情報のバインドを解除することができます。ステップ 2: 電話が自分用にマークされているかどうかを確認する
Amapの携帯電話番号を変更する方法 - Amapの携帯電話番号を変更する方法を詳しく紹介
Mar 20, 2024 pm 08:41 PM
Amapは正確な測位と豊富な機能でユーザーに愛されています。ただし、使用中に、個人情報とサービスの正確性を確保するために、バインドされている携帯電話番号を変更する必要がある場合があります。では、Amapの携帯電話番号を変更するにはどうすればよいでしょうか?編集者がいくつかの関連情報をまとめましたので、ぜひ一緒に見てください! Amapで携帯電話番号を変更するにはどうすればよいですか?答え: [Amap]-[マイ]-[設定アイコン]-[アカウントとセキュリティ]-[携帯電話番号]-[変更]-[次のステップ]。具体的な手順: 1. まず Amap ソフトウェアを開き、ホームページに入ります。右下隅の [My] をクリックする必要があります; 2. 次に、My One Second にいくつかの関連機能が表示されます。ここで右上をクリックします。隅にある[設定アイコン]。
携帯電話番号の利用状況を確認するにはどうすればよいですか？携帯電話番号の使用時間を確認するにはどうすればよいですか?
Mar 07, 2024 pm 04:30 PM
移動体通信技術の継続的な進歩により、携帯電話番号は私たちの日常生活に欠かせないコミュニケーションツールとなっています。携帯電話番号が圏外か滞納していないかなど、携帯電話番号の利用状況を確認する必要がある場合があります。 1. 携帯電話番号の利用状況を確認するにはどうすればよいですか？携帯電話番号の使用状況を確認するには、オペレーターのカスタマーサービスに問い合わせるのが最も直接的な方法です。オペレーターによって問い合わせ方法が異なる場合がありますが、通常はオペレーターのカスタマー サービス ホットラインに電話することで問い合わせることができます。カスタマーサービススタッフに問い合わせる際は、問い合わせたい携帯電話番号を伝えるだけで、カスタマーサービススタッフが詳しい利用状況を教えてくれます。したがって、特定の携帯電話番号の具体的な状況を知りたい場合は、オペレーターのカスタマー サービス ホットラインに電話することで関連情報を入手できます。がある
QQ メールボックスで携帯電話番号のバインドを変更する方法 - QQ メールボックスで携帯電話番号のバインドを変更する方法
Mar 04, 2024 pm 03:46 PM
多くの友人が QQ メールボックスの携帯電話番号バインドを変更する方法を知らないため、以下の編集者が QQ メールボックスの携帯電話番号バインドを変更する方法を共有します。編集者をフォローして見てみましょう。みんなの役に立つように。ステップ 1: まず、以下に示すように、QQ メールボックスを開き、上記の設定を選択します。ステップ 2: 以下に示すように、設定でアカウント オプションを選択します。ステップ 3: 以下に示すように、すぐにログアウトすることを選択します。ステップ 4: ログアウトした後、携帯電話番号と電子メール アカウントを登録することを選択します。ステップ 5: 以下に示すように、表示されるインターフェースで他のアカウントを登録することを選択します。ステップ 6: 以下に示すように、プロンプトに従って新しい携帯電話番号を使用し、テキスト メッセージを送信します。ステップ 7: 送信が完了すると、変更は成功です。以上が、編集者がお届けしたQQメールボックスの携帯電話番号バインドを変更する方法の全内容です。
JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか?
Oct 22, 2023 am 08:12 AM
JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます
PHPで携帯電話番号の位置を確認する方法
Oct 20, 2022 pm 03:00 PM
PHP で携帯電話番号の位置をクエリする方法: 1. 携帯電話番号の位置をクエリするための API をリクエストする; 2. 携帯電話番号または最初の 7 桁に基づいて携帯電話番号の位置情報をクエリする携帯電話番号の; 3. 「function juheHttpRequest($url, $params = false, $ispost = 0){...}」メソッドを通じて、インターフェースにコンテンツを返すように要求します。
iframe のスクロール動作を監視する
Feb 18, 2024 pm 08:40 PM
iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。
