用html和js做的抽獎效果僅僅是一個效果哦

單的html和js做的抽獎效果，自己也做過抽獎程序，用作年會上面的抽獎，效果不錯，賽光時代小編會后續的分享出來供大家使用得。近些年互聯網飛速發展，周邊的產業不斷的完善微信、手機等等都需要我們企業不斷的擴展和適應。

抽獎效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽獎程序-saiguangw.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
img {
border:none;
}
li {
list-style:none outside none;
}
body {
background:#c9c9c9;
font-size:14px;
font-family:"宋體";
}
.myBox {
margin:50px auto 0;
}
.myBox ul {
margin:0 auto 0;
position:relative;
width:500px;
height:100px;
overflow:hidden;
}
.myBox li {
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:40px;
color:#fff;
background:rgba(222,122,155,0.5);
}
.myBox li.on {
background:rgba(66,56,222,0.5);
}
.text {
height:50px;
overflow:hidden;
width:500px;
margin:20px auto 0;
font-size:20px;
line-height:50px;
text-align:center;
}
.bt,.jg,.zt {
float:left;
width:200px;
}
.bt {
width:100px;
height:50px;
background:rgb(200,100,55);
color:#fff;
cursor:pointer;
}
em {
font-size:30px;
font-style:normal;
color:red;
}
</style>
</head>
<body>
<div class="myBox">
<ul class="cj2">
<li>1</li>
</ul>
<div class="text">
<div class="bt bt2">點我抽獎</div>
<div class="jg jg2">中獎者為"<em></em>"號</div>
</div>
</div><script>
//by zyp
;(function($, window, document, undefined) {
var LuckDraw = function(ele, opt) {
this.$element = ele,
this.defaults = {
row: 4, //行
column: 4, //列
spacing: 0,
click: null,
time: 3,
end: function(e) {}
},
this.target,
this.options = $.extend({}, this.defaults, opt);
}
LuckDraw.prototype = {
init: function() {
var $this = this.$element;
var row = this.options.row;
var col = this.options.column;
var spacing = this.options.spacing;
var click = this.options.click;
var allNumber = 2 * (row + col) - 4;
var line = row - 2; //除去上下de行數
var length = $this.children('li').length;
var options = this.options;
if (length < allNumber) {
for (var i = length; i <= (allNumber - length); i++) {
$this.append("<li>" + (i + 1) + "</li>");
}
}
var children = $this.children('li');
var width = children.eq(0).width() || 0;
var height = children.eq(0).height() || 0;
//元素初始化
$this.css({
position: 'relative',
width: col * width + (col - 1) * spacing,
height: row * height + (row - 1) * spacing
});
children.css({
position: 'absolute'
});
if (line == 0) {
initOne();
} else {
initTwo();
}
//初始化函數
//此時分成4個部分，上、右、下、左
//上： 0 ~ col-1
//右： col ~ col+line
//下： col+line+1 ~ 2*col+line-1
//左： else
//如果只有兩行
//此時分成4個部分，上、右、下、左
function initOne() {
children.each(function(index) {
if (index >= 0 && index <= (col - 1)) {
$(this).css({
top: 0,
left: index * width + index * spacing
});
} else {
$(this).css({
bottom: 0,
right: index % col * width
});
}
});
}
//如果大于兩行
function initTwo() {
children.each(function(index) {
if (index >= 0 && index <= (col - 1)) {
$(this).css({
top: 0,
left: index * width + index * spacing
});
} else if (index >= col && index <= (col + line - 1)) {
$(this).css({
top: ((index + 1 - col)) * (height + spacing),
right: 0
});
} else if (index >= (col + line) && index <= (2 * col + line - 1)) {
$(this).css({
bottom: 0,
right: (index - ((col + line))) * (width + spacing)
});
} else {
$(this).css({
left: 0,
bottom: (index - (2 * col + line - 1)) * (height + spacing)
});
}
});
}
var target = $this.target || Math.floor(Math.random() * allNumber + 1); //目標，指定或隨機
var ix = 0; //位置
var stop;
var flg = false; //抽獎是否正在運行
/*
加速度公式
v1 = v0 + a*t;注意加速度的v代表時間
此時的t可以我們自己定義，所以是常量，所以只需要求a的值
*/
var a = -25.0;
var v0 = 500.0;
var t = 0.0,
v;
var time = this.options.time * 1000; //勻速運行的時間，單位秒
$(click).on('click', function() {
if (!flg) {
flg = true;
target = $this.target || Math.floor(Math.random() * allNumber + 1);
speedUp();
} else {
return;
}
});
//加速
function speedUp() {
runner(ix);
if (v <= 50) {
clearTimeout(stop);
v = 50;
t = 0.0;
uniform(); //跳轉到勻速
} else {
t++;
v = v0 + a * t;
stop = setTimeout(speedUp, v);
}
}
//勻速
function uniform() {
stop = setTimeout(uniform, v);
if (t == time / 50) {
clearTimeout(stop);
t = 0.0;
speedDown();
} else {
t++;
}
runner(ix);
}
//減速
function speedDown() {
var stop3 = setTimeout(speedDown, v);
if (v >= 500) {
v = 500;
if (ix == target - 1) {
clearTimeout(stop3);
options.end(target);
flg = false;
}
} else {
t++;
v = v - a * t;
}
runner(ix);
}
//ix++
function runner(i) {
children.removeClass('on').eq(ix).addClass('on');
i++;
if (i == allNumber) {
ix = 0;
} else {
ix = i;
}
}
},
setTarget: function(options) {
var $this = this.$element;
$this.target = options;
}
}
$.fn.myLuckDraw = function(options, target) {
var Ld = new LuckDraw(this, options);
Ld.setTarget(target);
Ld.init();
return this;
}
})(jQuery, window, document);
$(function() {
var tar = 5;
$('.cj2').myLuckDraw({
row: 3, //行
column: 5, //列
spacing: 5, //空隙
click: '.bt2', //點擊觸發
time: 3, //勻速運動的時間
end: function(e) {
//抽獎執行完畢的回調函數,參數e為獲獎編號
//因為這里是指定的，所以e == 12
$('.jg2 em').text(e);
}
});
});</script>
</body>
</html>

面制作技術詳解

演示視頻在文章底部

1.頁面內容居中顯示方法

將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。

將</div>放置在</body>之上。

將全部內容包裹在這個div中，就可以實現整個頁面居中。

內容顯示寬度為瀏覽器視窗寬度的50%。

margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。

2.導航欄懸停頂端方法

把四個a標簽裝到一個div中。

將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。

將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。

position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。

默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。

3.鼠標滑過導航標題或鏈接時改變背景色提示

這就要介紹關于css的寫法了。

簡單來說，就是在<head></head>標簽中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

學過HTML頁面中head標簽有啥用？——零基礎自學網頁制作的小伙伴應該知道，CSS腳本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>標簽。

hover指的是：當鼠標懸停在a上面時的狀態。

使用：連接。

這個狀態下要執行的內容在{}中。

background-color:#ffff00;即背景色為黃色。

3.隱藏滾動條方法

首先，我們要明確一點，就是，滾動條是在內容長度超過視窗高度時產生的。

如果要取消視窗最右側滾動條，就要控制內容高度。

把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。

在<p>標簽色上面添加<div>。

在</map>標簽下面添加</div>。

下面，為div規定尺寸，添加style="width:610px; height:530px;"。

這樣，就不會超出視窗。但是代碼寫完后發現并不是，如圖：

多出的文字內容超出div范圍，右側滾動條依然存在。

這就要在div的style中再增加一條語句"overflow-y:scroll;"

這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內容超出div的邊框。

如圖：

因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。

添加“overflow-x：hidden”即可，hidden（隱藏）。

如圖：hidden之后，將無法滾動或拖動畫面。

最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。

從前面的例子可知，hidden是不行的，有沒有別的辦法？

那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：

這個div這樣寫即可

</div>

同時還要給里面的div添加margin來讓它們對齊

</div>

完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作

頁動畫圖像、Flash 動畫和 JavaScript 實現的效果圖片，我們用最基礎的CSS也能實現。制作一個簡單的gif動畫圖，上圖就是效果圖。

用CSS3制作動畫圖，你需要了解兩個css屬性。

其一是 @keyframes

因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個屬性，from和to，from里面的內容定義動畫開始的狀態，to記錄動畫結束的狀態。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標簽元素使用這個動畫時候，就需要用到這個名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個div元素上用到這個動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續時間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

step-start:馬上跳到動畫每一結束幀的狀態

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環次數

默認是 1。屬性值infinite 代表無數次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

none:初始樣式,不改變默認行為.(默認行為)

forwards:動畫播放結束后保持最后一個狀態;

backwards:結束后保持第一個狀態;

animation-play-state :檢索或設置對象動畫的狀態

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

到此為止，屬性我們都學習完了，開始實踐部分：

首先準備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個<li></li>標簽里。所有li標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時候的圖片了。

最關鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點贊支持一下吧！

在線咨詢

上一篇：如何編寫HTML提交按鈕代碼？
下一篇：html+css3+js 創意設計-滑動登錄頁面

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用html和js做的抽獎效果僅僅是一個效果哦

面制作技術詳解

其一是 @keyframes

其二是 animation

您的項目需求