H5實現中獎記錄逐行滾動切換效果

阿新 • • 發佈：2019-02-09

前端頁面需先引入jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中獎記錄跑馬燈特效</title>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/recordRoll.js"></script>
    <style>
        .box{
            width 
: 18rem;
            height: 15rem;
            margin: auto;
            background-color: cadetblue;
        }
        .record_title{
            text-align: center;
            width: 100%;
            height: 2rem;
            margin-top: 0.2rem;
            z-index: 2;
            background-color 
: cadetblue;
            vertical-align: middle;
        }
        .record_list{
            height: 11rem;
            overflow: hidden;
            background-color: cadetblue;
            text-align: left;
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div 
 class="box">
        <div class="record_title">
        <h1>中獎記錄</h1>
        </div>
        <div class="record_list">
            <p>恭喜Ivy抽中10元話費</p>
            <p>恭喜LinDL抽中100元京東E卡</p>
            <p>恭喜Mary抽中40元電影票優惠券</p>
            <p>恭喜Ivy抽中30元話費</p>
            <p>恭喜金坎抽中50元話費</p>
            <p>恭喜Ivy抽中80元話費</p>
            <p>恭喜Ivy抽中200元話費</p>
            <p>恭喜慧林抽中5000元話費</p>
            <p>恭喜張敏抽中iPhone7</p>
            <p>恭喜Ivy抽中10元話費</p>
        </div>
    </div>
</body>
<script>
    $(document.body).ready(function(){
        $(".record_list").RollTitle({line:1,speed:800,timespan:1});
    });
</script>
</html>

利用定時器實現中獎記錄逐行展示
recordRoll.js

/**
 * Created by lin on 2017/3/12.
 */
(function($){
    $.fn.extend({
        RollTitle: function(opt){
            if(!opt) var opt={};
            var _this = this;
            _this.timer = null;
            _this.lineH = _this.find("p:first").height();
            _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);
            _this.speed=opt.speed,
            _this.timespan=opt.timespan;
            if(_this.line==0) this.line=1;

            _this.scrollUp=function(){
                _this.animate({
                    marginTop:0
                },_this.speed,function(){
                    for(i=1;i<=_this.line;i++){
                        _this.find("p:first").appendTo(_this);
                    }
                    _this.css({marginTop:0});
                });
            }
            _this.hover(function(){
                clearInterval(_this.timer);
            },function(){
                _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
            }).mouseout();
        }
    })
})(jQuery);

這裡寫圖片描述

H5實現中獎記錄逐行滾動切換效果

前端頁面需先引入jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

android自定義Gallery實現手動和自動迴圈滾動切換圖片

實現類似騰訊視訊頂欄的圖片切換，網上找了下寫的都不全，現在總結下我實現過程中遇到的問題：第一個問題：Gallery手動滑動翻頁參照網上的方法實現如下：自定義MyGalleyry繼承自Gallery 重寫onFling方法 private boolean isScrollingLeft(Motio

JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

輪播圖無縫滾動切換原理基本框架 <div class="slide">  <ul class="slide-nav"> <li class="activ

H5實現搜尋記錄功能

<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>搜尋記錄</titl

VUE+Element UI實現簡單的表格行內編輯效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://

實現ActionBar的home圖示動畫切換效果

效果圖 1.首先，該頁面的佈局是一個DrawerLayout，程式碼如下： <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmln

如何實現hover事件中旋轉門的切換效果

我們經常看到當滑鼠移到一個div或者圖片或者其他上的時候，就會切換到另外一個div上，並且是以90度旋轉效果，有點像現實中的旋轉門一樣，現在就簡單的寫下，看下是如何實現的吧。 <div class="box"> <div class

【微信】運用fragment和viewpage實現主頁面和副頁面切換效果

這個專案是我自己學習時寫出來的，所以難免有些瑕疵或者種種不足，歡迎各位大佬挑刺，也歡迎其他菜鳥們一起學習。先放張程式結構圖，大致結構還是比較清晰的首先可以建好xml佈局檔案，一個主佈局（存放四個切換圖示），四個分佈局fragment 程式碼貼上： `

Android 實現多頁介面左右滑動切換效果之入門+進階（ViewPager+PagerAdapter）

前一篇已經簡單介紹了ViewPager實現介面左右滑動的簡單實現方法。可以該方法實現方式雖說簡單，但是存在很大的問題——介面雖然隨左右滑動而切換了，但是實際所在的操作類還同一個（即在同一個Activity中)，這一問題將導致程式的邏輯變得複雜時，介面控制元件變多時該Activity中實現的程式碼迅速的增加，最

簡單js實現豎行tab切換

block webkit des .class utf eight ref class clas <!DOCTYPE ><html lang="ru"><head><title>簡單js實現豎行tab切換</title&

實現兩個檔案內容逐行進行對比的shell指令碼

寫一個實現兩個檔案內容逐行進行對比的shell指令碼，將兩個檔案相同的內容輸出到一個檔案中。程式碼實現如下： #!/bin/bash #output is the same line in file1 andfile2 for line1 in $(cat $1) do

vue 頁面切換的時候vuex記錄之前的滾動條位置

beforeRouteEnter (to, from, next) { let aScrollY = store.getters.aScrollY setTimeout(function () { window.scrollTo(0, aScrollY); }

【UI視覺】100行程式碼實現微信底部漸變切換效果！！！

1、我們先來看一下要實現的效果 2、我們看到當進行切換頁面的時候,關聯的兩個Tab將會產生過渡效果,接下來我們用最簡單的程式碼去實現 3、思路：在Tab上放置一張為選中時的圖片,再將已經選中的圖片覆蓋在未選中的圖片上，我們來控制選中圖片的透明度來實現漸變。 4、佈局方面：這是單個T

逐行分析AQS原始碼(4)——Condition介面實現

前言本篇文章是基於執行緒間的同步與通訊(4)——Lock 和 Condtion這篇文章寫的，在那篇文章中，我們分析了Condition介面所定義的方法，本篇我們就來看看AQS對於Condition介面的這些介面方法的具體實現。下文中筆者將假設讀者已經閱讀過那篇文

nodejs 文本逐行讀寫功能的實現

name callback dst index thp var put read true 利用nodejs實現：逐行讀寫（從一個文件逐行復制到另外一個文件）；逐行讀取、處理和寫入（讀取一行，處理後，寫入另一個文件） 1.所需要的模塊： fs，os，readline 2.具

js實現頁面滾動切換導航欄/點選導航欄跳轉到指定位置

最近一直在弄頁面的事情，對頁面方面的知識又鞏固了一下。這次的內容如題，大家對程式碼有疑問或者是有更好的方法歡迎留言！js部分 //標題物件 var title = document.getElementById("title"); //選

滾動檢視（UIScrollView）的用法和實現頁面滾動切換

1，當圖片尺寸超過螢幕時，使用UIScrollView可以實現滾動條檢視，即手指觸控滾動螢幕方便瀏覽整個頁面。 1 2 3 4 5 6 let scrollView=UIScrollView() scrollView.fram

js實現網頁全屏切換（平滑過渡），滑鼠滾動切換

實現效果為頁面平滑過渡全屏切換，點選導航和滑鼠滾動都可以切換。效果圖：程式碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

VB下逐行列印的實現方法

用過Windows的人都知道，幾乎所有軟體，Word也好，Excel也好，AutoCAD也好，在列印的時候，一旦按下【列印】按鈕，印表機就會開始動作，然後整頁紙會被送入印表機，哪怕這張紙上僅有一個字也是如此。這就是所謂的“按頁”列印，。嗯，是的，這在一般情況下似乎也沒有什麼問

VC6.0逐行讀取記錄檔案文字檔案CStdioFile

void CLogfile_analysisDlg::OnReadfile() { m_Grid.DeleteAllItems(); CString strText = ""; CString sz

H5實現中獎記錄逐行滾動切換效果

相關推薦