滚动效果实现

Weslie0803 · Oct 26, 2022 · c4c3729 · c4c3729
1 parent 885bcc3
commit c4c3729
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 抽奖软件UI.zip
 analysis.md
 抽奖方案设计3.0(2).pdf
-抽奖软件UI/
+抽奖软件UI/
+base.html
diff --git a/index.html b/index.html
@@ -32,7 +32,34 @@
             <div class="row">
                 <div class="col-xs-4">
                     <div id="num1" class="showNum">
-                        <div id="number1" ></div>
+                        <div class="CardRolling" >
+                            <ul>
+                            <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
+                            <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
+                            </ul>
+                        </div>
+                        <div class="NumRolling" >
+                            <ul>
+                            <li><img src="抽奖软件UI/数字/0.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/1.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/2.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/3.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/4.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/5.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/6.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/7.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/8.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/9.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/0.png" width="50%" height="50%" style="display: block;"></li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 <div class="col-xs-4">

diff --git a/index.js b/index.js
@@ -141,6 +141,7 @@ $(document).ready(function () {
     $("#num2").css("display", "none");
     $(".col-xs-4").css("width", "100%");
     $(".container").css("max-width", "380px");
+    $(".showNum").toggleClass("numUndicided");
   }
   var toggleDoubleFrame = function(){
     $("#num3").parent().remove();

diff --git a/scripts.72999ec6.css b/scripts.72999ec6.css
@@ -794,7 +794,7 @@ body {
 }
 
 .showNum {
-    height: 400px;
+    height: 580px;
     border: 1px solid #fff;
     border-radius: 12px;
     box-sizing: border-box;
@@ -805,13 +805,16 @@ body {
     background-color: hsla(0,0%,100%,.5);
     margin-right: 15px;
     margin-left: 15px;
-    position: relative
+    position: relative;
+    /* background-image: url(抽奖软件UI/底色/复合/复合2.png); */
+    background-size: 100% 100%;
+    overflow: hidden;
 }
 
 .row {
     margin-right: 0;
     margin-left: 0;
-    margin-top: 15%
+    margin-top: 50px;
 }
 
 body {
@@ -820,3 +823,62 @@ body {
     background-position: 50%;
     background-size: 100% 100%
 }
+
+.CardRolling {
+    position: absolute;
+    overflow: hidden;
+    width: 290px;
+    height: 580px;
+    /* display: none; */
+}
+.NumRolling {
+    position: absolute;
+    overflow: hidden;
+    width: 290px;
+    height: 580px;
+}
+.CardRolling>ul li {
+    /* float: left; */
+    width: 290px;
+    height: 580px;
+}
+.NumRolling>ul li {
+    list-style-type: none;
+    float: left;
+    width: 290px;
+    height: 580px;
+}
+.CardRolling>ul li img{
+    width: 100%;
+    height: 100%;
+}
+.NumRolling>ul li img{
+    width: 50%;
+    height: 50%;
+    margin: auto;
+    margin-top: 30%;
+    text-align: center;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+}
+@keyframes runY {
+    to {
+        transform: translateY(-4640px);
+    }
+}
+@keyframes runX {
+    to {
+        transform: translateX(-2900px);
+    }
+}
+.CardRolling>ul {
+    animation: runY 3s linear infinite;
+    padding-left: 0px ;
+}
+.NumRolling>ul {
+    animation: runX 3s linear infinite;
+    padding-left: 0px ;
+    width: 3190px;
+}