html转盘抽奖怎么悬浮在页面中,index.html

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* {

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

}

body {

background-color: #3b3674;

background-image: url(images/foot-bg.png);

background-position: 0 100%;

background-repeat: no-repeat;

padding-bottom: 100px;

background-size: 100%;

}

.w1400-img img {

max-width: 1400px;

min-width: 1200px;

display: block;

margin: 0 auto;

}

.lucyDraw {

width: 1200px;

height: 625px;

margin: 0 auto;

background-image: url(images/ld2.jpg);

background-size: 100%;

}

.turnplate {

width: 500px;

height: 500px;

margin: 0 auto;

background-image: url(images/turnplate-bg.png);

background-size: 100% 100%;

position: relative;

border-radius: 50%;

overflow: hidden;

box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.1);

}

#wheelcanvas {

width: 424px;

height: 424px;

background-image: url(images/turnplate-ct.png);

background-size: 100% 100%;

border-radius: 50%;

overflow: hidden;

}

.turnplate .item {

margin-top: 38px;

margin-left: 38px;

border: none;

border-radius: 50%;

overflow: hidden;

}

.turnplate .pointer {

position: absolute;

top: 155px;

left: calc(50% - 60px);

border-radius: 50%;

cursor: pointer;

}

.deepTime {

width: 1200px;

text-align: center;

margin: 20px auto;

font-size: 18px;

color: #ffdbb4;

font-family: 黑体;

display: flex;

align-items: center;

justify-content: center;

}

.deepTime span {

height: 40px;

width: 90px;

line-height: 40px;

display: inline-block;

background-color: #9c5d97;

border: 2px solid #de6891;

font-size: 24px;

color: #fefefe;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

margin: 0 10px;

}

.deepTime a {

color: #ffdbb4;

margin: 0 2px;

}

.deepTime a.logout {

margin-left: 5px;

margin-right: 10px;

font-size: 14px;

}

.zjdt {

position: relative;

margin-top: 40px;

}

.zjdt .w754 {

width: 754px;

height: 100%;

position: absolute;

left: calc(50% - 377px);

top: 0;

overflow: hidden;

}

.zjdt .w754 a {

width: 185px;

height: 50px;

text-align: center;

line-height: 50px;

font-size: 22px;

color: #fff;

border-radius: 10px;

display: block;

float: right;

background-color: #ff5a6e;

}

.w754_2 {

width: 754px;

margin: 20px auto;

}

.w754_2 table.th th {

background-color: #ff5a6e;

height: 40px;

text-align: center;

color: #fefeff;

font-weight: normal;

}

.w754_2 table td {

background-color: #fff;

height: 35px;

font-size: 16px;

color: #111555;

text-align: center;

}

.marqueeBox {

height: 140px;

overflow: hidden;

background-color: #fff;

}

.setting {

margin-top: 50px;

position: relative;

}

.setting .w754 {

width: 754px;

position: absolute;

bottom: 0;

left: calc(50% - 377px);

overflow: hidden;

}

.setting .w754 img {

width: 100% !important;

max-width: 100%;

min-width: 100%;

display: block;

}

.rule {

margin-top: 50px;

}

.w754_2 .txt {

color: #fff;

line-height: 30px;

}

.shadowBox {

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

background-color: rgba(0, 0, 0, .3);

display: none;

}

.shadowBox .itemBox {

position: relative;

display: none;

}

.shadowBox .close {

width: 30px;

height: 30px;

position: absolute;

z-index: 1000;

background-image: url(images/close.png);

background-size: 100%;

right: 10px;

top: 10px;

cursor: pointer;

}

.shadowBox .bigBox {

display: -webkit-box;

-webkit-box-align: center;

-webkit-box-pack: center;

width: 100%;

height: 100%;

background-color: transparent;

position: absolute;

left: 0;

top: 0;

}

.prize {

width: 470px;

height: 615px;

background-image: url(images/ld7.png);

background-size: 100%;

background-repeat: no-repeat;

position: relative;

z-index: 1000;

}

.prize .pic {

text-align: center;

display: block;

width: 200px;

margin: 135px auto 0;

}

.prize .pic img {

width: 100%;

}

.prize .title {

font-size: 22px;

color: #ff5a6e;

margin: 30px auto;

text-align: center;

}

.prize .btn {

position: absolute;

width: 215px;

height: 45px;

left: calc(50% - 107.5px);

bottom: 45px;

background-color: #9c5d97;

font-size: 16px;

color: #fff;

text-align: center;

line-height: 45px;

border-radius: 8px;

cursor: pointer;

}

.writeInfo {

width: 370px;

height: 485px;

position: relative;

z-index: 1000;

background-color: #fff;

border-radius: 10px;

padding: 65px 50px;

}

.writeInfo h3 {

font-size: 22px;

color: #333;

font-weight: normal;

text-align: center;

margin-bottom: 60px;

}

.writeInfo h3 span {

color: #ff5a6e;

margin-left: 5px;

}

.writeInfo li {

display: -webkit-box;

-webkit-box-align: center;

width: 100%;

height: 40px;

margin-top: 30px;

}

.writeInfo li label {

width: 65px;

display: block;

}

.writeInfo li input {

width: 280px;

height: 40px;

margin-left: 5px;

outline: none;

padding: 0 10px;

font-size: 18px;

border: none;

background-color: #eeeeee;

}

.writeInfo li .sub {

width: 170px;

height: 45px;

text-align: center;

line-height: 45px;

color: #fff;

background-color: #9c5d97;

border-radius: 6px;

margin: 50px auto 0;

cursor: pointer;

}

.subSuccess {

width: 470px;

height: 615px;

background-image: url(images/ld8.png);

background-size: 100%;

background-repeat: no-repeat;

position: relative;

z-index: 1000;

}

.subSuccess .my {

width: 170px;

height: 45px;

text-align: center;

line-height: 45px;

color: #fff;

background-color: #9c5d97;

border-radius: 6px;

position: absolute;

bottom: 50px;

left: calc(50% - 85px);

cursor: pointer;

}

.noList {

width: 470px;

height: 615px;

background-image: url(images/ld9.png);

background-size: 100%;

background-repeat: no-repeat;

position: relative;

z-index: 1000;

}

.noList .close2 {

width: 170px;

height: 45px;

text-align: center;

line-height: 45px;

color: #fff;

background-color: #9c5d97;

border-radius: 6px;

position: absolute;

bottom: 50px;

left: calc(50% - 85px);

cursor: pointer;

}

.noDeefTime {

width: 470px;

height: 615px;

background-image: url(images/ld11.png);

background-size: 100%;

background-repeat: no-repeat;

position: relative;

z-index: 1000;

}

.noDeefTime .close2 {

width: 170px;

height: 45px;

text-align: center;

line-height: 45px;

color: #fff;

background-color: #9c5d97;

border-radius: 6px;

position: absolute;

bottom: 50px;

left: calc(50% - 85px);

cursor: pointer;

}

.hadList {

width: 420px;

height: 575px;

background-image: url(images/ld10.png);

background-size: 100%;

background-repeat: no-repeat;

position: relative;

z-index: 1000;

padding: 20px 25px;

}

.hadList .back {

width: 170px;

height: 45px;

text-align: center;

line-height: 45px;

color: #fff;

background-color: #9c5d97;

border-radius: 6px;

cursor: pointer;

margin: 30px auto 30px;

}

.hadList table.thead {

width: 420px;

margin: 300px auto 0;

}

.hadList .listBox {

width: 420px;

height: 160px;

background-color: #fff;

overflow-y: scroll;

}

::-webkit-scrollbar {

width: 2px;

height: 10px;

background-color: transparent;

}

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 4px

background-color: transparent;

border-radius: 4px;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

border-radius: 2px;

-webkit-box-shadow: inset 0 0 4px transparent;

background-color: #9c5d97;

}

.hadList .listBox table {

width: 100%;

text-align: center;

}

.hadList .listBox table th {

height: 40px;

}

.hadList .listBox table td {

height: 40px;

}

.hadList .listBox table td.red {

color: #ff5a6e;

}

turnplate-pointer.png

您还有1次抽奖机会

时间用户奖项
2019-1-3 14:30:1215021227561AirPods
2019-1-3 14:30:1218321090064AirPods
2019-1-3 14:30:1213801767495AirPods
2019-1-3 14:30:1215889619096AirPods
2019-1-3 14:30:1213121329168AirPods

1、 凡订单金额每满2000元,即可获赠一次抽奖机会,100%中奖。


2、 只有真实有效订单号才可获奖,退订单、虚假订单将取消其获奖资格。


3、 实物奖品将在活动结束一个月后统一配送,请抽奖者认真填写配送信息。


4、 活动截止时间:2019年3月15日 24:00


5、 活动最终解释权归研鼎商城所有。

小米电视
填写收件信息

恭喜您抽到小米电视

  • 姓名:
  • 电话:
  • 地址:
  • 备注:
  • 提交信息
我的中奖
立刻抽奖
奖项抽奖时间
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
小米电视2019-2-12 10:01:28
返回首页
返回首页

$(function () {

var marquee = document.getElementById('marquee');

var offset = 0;

var scrollheight = marquee.offsetHeight;

var firstNode = marquee.children[0].cloneNode(true);

marquee.appendChild(firstNode);//还有这里

function mq() {

if (offset == scrollheight) {

offset = 0;

}

marquee.style.marginTop = "-" + offset + "px";

offset += 1;

}

var t;

t = setInterval(mq, 50);

$("#marquee").hover(function () {

window.clearInterval(t);

}, function () {

t = setInterval(mq, 50);

});

if (($('#marquee tr').length) / 2 <= 4) {

window.clearInterval(t);

}

$('#marquee tr').each(function (index, domEle) {

// domEle == this

var name = $(domEle).find('td:eq(1)').text();

var nameAfter = name.substr(0, 3) + "****" + name.substr(7);

$(domEle).find('td:eq(1)').text(nameAfter);

});

});

var turnplate = {

restaraunts: [],//大转盘奖品名称

colors: [],//大转盘奖品区块对应背景颜色

outsideRadius: 212,//大转盘外圆的半径

textRadius: 155,//大转盘奖品位置距离圆心的距离

insideRadius: 45,//大转盘内圆的半径

startAngle: 0,//开始角度

randomRate: [], //控制获奖率,百分制(相加需等于100%),对应restaraunts(顺序需要保持一致),

bRotate: false//false:停止;ture:旋转

};

$(document).ready(function () {

//动态添加大转盘的奖品与奖品区域背景颜色

turnplate.randomRate = ["15%", '10%', '20%', '50%', '1%', '4%']; //小心设置按100%分配

turnplate.restaraunts = ["摄影背包", "三脚架套餐", "移动电源", "记事本", "小米电视", "苹果耳机"];

turnplate.colors = ["transparent", "transparent", "transparent", "transparent", "transparent", "transparent"];

/**

var rotateTimeOut = function () {

$('#wheelcanvas').rotate({

angle: 0,

animateTo: 2160,

duration: 8000,

callback: function () {

alert('网络超时,请检查您的网络设置!');

}

});

};

**/

//旋转转盘 item:奖品位置; txt:提示语;

var rotateFn = function (item, txt) {

var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));

if (angles < 270) {

angles = 270 - angles;

} else {

angles = 360 - angles + 270;

}

$('#wheelcanvas').stopRotate();

$('#wheelcanvas').rotate({

angle: 0,

animateTo: angles + 1800,

duration: 8000,

callback: function () {

if (txt == "小米电视") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz1.png');

}

if (txt == "苹果耳机") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz2.png');

}

if (txt == "摄影背包") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz3.png');

}

if (txt == "三脚架套餐") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz4.png');

}

if (txt == "移动电源") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz5.png');

}

if (txt == "记事本") {

$('.shadowBox .prize .pic img').attr('src', 'images/pz6.png');

}

$('.shadowBox .prize .title').text(txt);

$('.shadowBox').fadeIn();

$('.shadowBox .prize').fadeIn();

turnplate.bRotate = !turnplate.bRotate;

}

});

};

$('.shadowBox .itemBox .close').click(function () {

$('.shadowBox .itemBox').fadeOut();

$('.shadowBox').fadeOut();

})

//立刻抽奖

$('.shadowBox .itemBox .close2,.hadList .back').click(function () {

window.location.reload();

})

$('.shadowBox .prize .btn').click(function () {

$('.shadowBox .writeInfo').fadeIn();

})

$('.shadowBox .writeInfo .sub').click(function () {

$('.shadowBox .subSuccess').fadeIn();

})

$('.subSuccess .my').click(function () {

$('.shadowBox .hadList').fadeIn();

})

$('.pointer').click(function () {

if (turnplate.bRotate) return;

turnplate.bRotate = !turnplate.bRotate;

//获取随机数(奖品个数范围内)

var item = rnd(turnplate.randomRate);

//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]

rotateFn(item, turnplate.restaraunts[item - 1]);

});

});

function rnd(rate) {

var random = Math.floor(Math.random() * 100);

var myRandom = [];

var randomList = [];

var randomParent = [];

for (var i = 0; i < 100; i++) {

myRandom.push(parseInt([i]) + 1);

}

for (var i = 0; i < rate.length; i++) {

var temp = [];

var start = 0;

var end = 0;

randomList.push(parseInt(rate[i].split('%')[0]));

for (var j = 0; j < randomList.length; j++) {

start += randomList[j - 1] || 0

end += randomList[j]

}

temp = myRandom.slice(start, end);

randomParent.push(temp)

}

for (var i = 0; i < randomParent.length; i++) {

if ($.inArray(random, randomParent[i]) > 0) {

return (i + 1)

}

}

}

//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染

window.onload = function () {

drawRouletteWheel();

};

function drawRouletteWheel() {

var canvas = document.getElementById("wheelcanvas");

if (canvas.getContext) {

//根据奖品个数计算圆周角度

var arc = Math.PI / (turnplate.restaraunts.length / 2);

var ctx = canvas.getContext("2d");

//在给定矩形内清空一个矩形

ctx.clearRect(0, 0, 422, 422);

//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式

ctx.strokeStyle = "transparent";

//font 属性设置或返回画布上文本内容的当前字体属性

ctx.font = '16px Microsoft YaHei';

for (var i = 0; i < turnplate.restaraunts.length; i++) {

var angle = turnplate.startAngle + i * arc;

ctx.fillStyle = turnplate.colors[i];

ctx.beginPath();

//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)

ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);

ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);

ctx.stroke();

ctx.fill();

//锁画布(为了保存之前的画布状态)

ctx.save();

//----绘制奖品开始----

ctx.fillStyle = "transparent";

var text = turnplate.restaraunts[i];

var line_height = 17;

//translate方法重新映射画布上的 (0,0) 位置

ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

//rotate方法旋转当前的绘图

ctx.rotate(angle + arc / 2 + Math.PI / 2);

}

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值