碼上快樂

相關內容    簡體    繁體

js 上下滾動抽獎效果

本文轉載自   查看原文   2019-01-24 18:15   876    js 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="css/lottery.css">
</head>
<body>
<div class="header">
    <img class="head-img" src="">
    <div class="username">歡迎您，請先登錄</div>
    <a class="btn-login">立即登錄</a>
    <a class="btn-recharge">立即充值</a>
</div>
<div class="left">
    <div class="left-item">
        <img class="left-item-img">
        <div class="left-item-username">李****</div>
        <div class="left-item-word">抽中獎品</div>
        <div class="left-item-name">硬中華</div>
    </div>
    <div class="left-item">
        <img class="left-item-img">
        <div class="left-item-username">李****</div>
        <div class="left-item-word">抽中獎品</div>
        <div class="left-item-name">硬中華</div>
    </div>
    <div class="left-item">
        <img class="left-item-img">
        <div class="left-item-username">李****</div>
        <div class="left-item-word">抽中獎品</div>
        <div class="left-item-name">硬中華</div>
    </div>
    <div class="left-item">
        <img class="left-item-img">
        <div class="left-item-username">李****</div>
        <div class="left-item-word">抽中獎品</div>
        <div class="left-item-name">硬中華</div>
    </div>
</div>
<div class="right">
    <a class="right-btn">我的獎品</a>
    <a class="right-btn">抽獎記錄</a>
    <a class="right-btn">充值記錄</a>
</div>
<div class="wb-name">測試網吧</div>
<div class="product-list">
    <div class="product-item">
        <div class="product-img">
            <ul id="ul_one">
                <li data-id="22"><img src="http://image.fs028.cn/uploads/image/product/4/5bc6a38d998b7_thumb.jpg"></li>
                <li data-id="33"><img src="http://image.fs028.cn/uploads/image/product/base/20170913145722976_thumb.jpg"></li>
                <li data-id="44"><img src="http://image.fs028.cn/uploads/image/product/img_list/b6d80ee56a4ae47151ae0955a3c05jpeg_thumb.jpeg"></li>
                <li data-id="52"><img src="http://image.fs028.cn/uploads/image/product/img_list/066d818bff110ae45a9c99d4568c9jpeg_thumb.jpeg"></li>
                <li data-id="62"><img src="http://image.fs028.cn/uploads/image/product/base/20180208141942632_thumb.jpg"></li>
                <li data-id="71"><img src="http://image.fs028.cn/uploads/image/product/base/20170913112057614_thumb.png"></li>
                <li data-id="8222"><img src="http://image.fs028.cn/uploads/image/product/base/20180703082951131_thumb.jpg"></li>
            </ul>
        </div>
    </div>
    <div class="product-item">
        <div class="product-img">
            <ul id="ul_two">
                <li><img src="http://image.fs028.cn/uploads/image/product/4/5bc6a38d998b7_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20170913145722976_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/img_list/b6d80ee56a4ae47151ae0955a3c05jpeg_thumb.jpeg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/img_list/066d818bff110ae45a9c99d4568c9jpeg_thumb.jpeg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20180208141942632_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20170913112057614_thumb.png"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20180703082951131_thumb.jpg"></li>
            </ul>
        </div>
    </div>
    <div class="product-item">
        <div class="product-img">
            <ul  id="ul_three">
                <li><img src="http://image.fs028.cn/uploads/image/product/4/5bc6a38d998b7_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20170913145722976_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/img_list/b6d80ee56a4ae47151ae0955a3c05jpeg_thumb.jpeg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/img_list/066d818bff110ae45a9c99d4568c9jpeg_thumb.jpeg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20180208141942632_thumb.jpg"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20170913112057614_thumb.png"></li>
                <li><img src="http://image.fs028.cn/uploads/image/product/base/20180703082951131_thumb.jpg"></li>
            </ul>
        </div>
    </div>
</div>
<div class="remain-count">（剩余次數：5）</div>
<a class="btn-cjgz"></a>
<a class="btn-kscj"></a>
<a class="btn-jplb"></a>
<a class="btn-back">返回選購商品</a>
</body>
</html>
<script src="js/jquery-1.7.min.js"></script>
<script>
var map = {};
var goods_id_list = [];

/*
  var id 對象ID
  var time 滾動間隔時間
  var x 當前已經滾動的次數
  var m 重復輪訓次數
  var mcount 停留在那一層
  var fun 執行完的觸發函數
*/
function scrollOne(id,time,x,m,mcount,fun) {　
    var count = $(id).find('li').length;
    if(m=='0'){
        count=mcount;
    }
    
    var height = 80; /*每個item 的高度*/
    var spe = 4; /*滾動速度*/
    var n = 0;/*總共可以滾動多少次*/
    n = (count-1)*height/spe; /*輪訓一次 循環循環的次數*/
    if(x<=n) {
        x = x+1;
        var top = spe*x-spe;
        var css = {
            top:'-'+top+'px'
        };
        $(id).css(css);
        setTimeout("scrollOne('"+id+"',"+time+","+x+","+m+","+mcount+","+fun+")", time);
        if(n==(x-1) && m=='0'){
            if (typeof fun=== "function"){
                fun(); 
            }
        }
    }else{
        if(m>0) {
            m = m-1;
            setTimeout("scrollOne('"+id+"',"+time+",0,"+m+","+mcount+","+fun+")", time);
        }
    }
}

function scroll(id,spee,goods_id,fun){
    var level = map[goods_id];
    scrollOne(id,spee,0,5,level,fun);
}

/*初始化數據*/
function initData(){
    var key = 1;
    $("#ul_one li").each(function(){
        var goods_id = parseInt($(this).data('id'));
        map[goods_id]=key;
        goods_id_list.push(goods_id);
        key++;
    });
}

/*打亂數組*/
function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

/*獲取中獎列表*/
function getPidList(zj){
    if(zj){
        return {'one':zj,'two':zj,'three':zj};
    }else{
        goods_id_list = shuffle(goods_id_list);
        return {'one':goods_id_list[0],'two':goods_id_list[1],'three':goods_id_list[2]};
    }
}

initData();

var getPidList = getPidList(0);
scroll('#ul_one',2,getPidList['one']);
scroll('#ul_two',6,getPidList['two']);
scroll('#ul_three',9,getPidList['three'],function(){alert(2)});

</script>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用jquery完成抽獎圖片滾動的效果 抽獎動畫 - 滾動抽獎 簡單JS旋轉實現轉盤抽獎效果 JS新聞滾動效果 js實現文字上下滾動效果 列表上下滾動效果JS示例 原生js實現跑馬燈抽獎效果 js實現向上滾動效果 avalon做的抽獎效果 vue刮刮卡抽獎效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM