js刮刮乐代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了刮刮乐效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#rectangle {
width: 200px;
height: 50px;
background-color: #ddd;
border: 1px solid #aaa;
padding: 10px;
font-size:18px;
font-weight:bold;
text-align: center;
line-height: 50px;
position: relative;
color: #f00;
}
</style>
<script type="text/javascript">
var cache = {};
//手机端事件
(function(exports) {
function touchEvent(target, startEvent, moveEvent, endEvent) {
var slider = {
//判断设备是否支持touch事件
touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider: null,
startEvent: null,
moveEvent: null,
endEvent: null,
//滑动开始
start: function(event) {
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {
x: touch.pageX,
y: touch.pageY,
time: +new Date
}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
slider.slider.addEventListener('touchmove', slider.move, false);
slider.slider.addEventListener('touchend', slider.end, false);
if (slider.startEvent != undefined && typeof(slider.startEvent) == "function")
slider.startEvent.call(this, touch);
},
//移动
move: function(event) {
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
};
//isScrolling为1时,表示纵向滑动,0为横向滑动
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; 
if (isScrolling === 0) {
//  event.preventDefault();      //阻止触摸事件的默认行为,即阻止滚屏
}
if (slider.moveEvent != undefined && typeof(slider.moveEvent) == "function")
slider.moveEvent.call(this, touch);
},
//滑动释放
end: function(event) {
var duration = +new Date - startPos.time; //滑动的持续时间
if (isScrolling === 0) { //当为水平滚动时
if (Number(duration) > 10) {
//判断是左移还是右移,当偏移量大于10时执行
if (endPos.x > 10) {
} else if (endPos.x < -10) {
}
}
if (slider.endEvent != undefined && typeof(slider.endEvent) == "function")
slider.endEvent.call(this, event);
}
//解绑事件
slider.slider.removeEventListener('touchmove', slider.move, false);
slider.slider.removeEventListener('touchend', slider.end, false);
},
//初始化
init: function() {
var self = this; //this指slider对象 
//addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性        
if (!!self.touch) self.slider.addEventListener('touchstart', this.start, false);
}
}
slider.slider = target;
slider.startEvent = startEvent;
slider.moveEvent = moveEvent;
slider.endEvent = endEvent;
slider.init();
return {
touch: slider.touch,
target: slider.slider
}
};
//windows按下拖动对象
function dragEvent(down_target, move_target, down, move, up) {
var drag = {
down_target: null,
move_target: null,
move: null,
up: null,
down: null,
intial: function(down_target, move_target, down, move, up) {
if (down_target == undefined || move_target == undefined || move == undefined)
return;
this.down_target = down_target;
this.move_target = move_target;
this.down = down;
this.move = move;
this.up = up;
drag.prefixedEvent(drag.down_target, "mousedown", this.mousedown, true);
drag.prefixedEvent(drag.down_target, "mouseup", this.mouseup, true);
drag.prefixedEvent(document, "mouseup", this.mouseup, true);
},
mouseup: function(e) {
drag.stopEvent(e); //这里需要冒泡
if (drag.up != undefined && typeof(drag.up) == "function")
drag.up.call(this, e);
drag.prefixedEvent(drag.move_target, "mousemove", drag.mousemove, false);
},
mousemove: function(evt) {
var e = (evt) ? evt : window.event;
drag.move.call(this, e);
},
mousedown: function(evt) {
drag.stopEvent(evt); //这里阻止冒泡
var e = (evt) ? evt : window.event;
if (drag.down != undefined && typeof(drag.down) == "function")
drag.down.call(this, e);
drag.prefixedEvent(drag.move_target, "mousemove", drag.mousemove, true);
},
stopEvent: function(evt) {
if (evt == undefined) return;
//判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble
var e = (evt) ? evt : window.event; 
if (window.event) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
},
prefixedEvent: function(element, type, callback, isAdd) {
var pfx = ["webkit", "moz", "MS", "o", ""];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
if (isAdd)
element.addEventListener(pfx[p] + type, callback, false);
else
element.removeEventListener(pfx[p] + type, callback, false);
}
}
}
drag.intial(down_target, move_target, down, move, up);
return drag;
}
//**********获取元素相对屏幕的xy值*******************
var elmentTop = function(e) { /*获取元素相对于屏幕的X值*/
var offset = e.offsetTop;
if (e.offsetParent != null)
offset += arguments.callee(e.offsetParent);
return offset;
}
var elmentLeft = function(e) { /*获取元素相对于屏幕的Y值*/
var offset = e.offsetLeft;
if (e.offsetParent != null)
offset += arguments.callee(e.offsetParent);
return offset;
}
//刮刮卡对象
exports.guagua = function(opts) {
opts = opts || {};
this.parent = opts.parent;
this.color = opts.color || "#555";
this.unit = opts.unit || 10;
this.range = opts.range || 5;
this.fuzzy = opts.fuzzy || 3;
this.rate = opts.rate || 0.7;
this.success = opts.success || null;
this.successed = false;
this.draws = [];
this.drawsed = [];
if (this.parent != undefined && this.parent != null) {
this.width = this.parent.offsetWidth;
this.height = this.parent.offsetHeight;
this.lastMoveX = null;
this.lastMoveY = null;
this.intial();
}
}
guagua.prototype = {
intial: function() {
this.rows = Math.round(this.width / this.unit);
this.columns = Math.round(this.height / this.unit);
this.createDraw();
this.createMask();
},
createUnit: function() {
var div = document.createElement('div');
div.style.margin = 0;
div.style.position = "absolute";
div.style.width = this.unit + "px";
div.style.height = this.unit + "px";
div.style.backgroundColor = this.color;
div.style.zIndex = 1;
div.style.border = "none";
div.style.padding = 0;
return div;
},
createDraw: function() {
for (var i = 0; i < this.columns; i++)
for (var j = 0; j < this.rows; j++) {
var div = this.createUnit();
div.style.left = (j * this.unit) + "px";
div.style.top = (i * this.unit) + "px";
div.id = (i * this.unit) + "|" + (j * this.unit);
this.draws.push(div.id);
this.parent.appendChild(div);
}
},
createMask: function() {
var div = document.createElement('div');
div.style.margin = 0;
div.style.position = "absolute";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.left = 0;
div.style.top = 0;
div.style.zIndex = 2;
var that = this;
function move(e) {
var moveX = e.pageX - document.downX,
moveY = e.pageY - document.downY;
that.drawMove(moveX, moveY);
// console.log("x,y:" + moveX + "," + moveY);
}
function up(e) {
that.lastMoveX = null;
that.lastMoveY = null;
}
function down(e) {
document.downX = elmentLeft(this);
document.downY = elmentTop(this);
}
touchEvent(div, down, move, up);
this.drawer = dragEvent(div, div, down, move, up);
this.parent.appendChild(div);
},
drawMove: function(moveX, moveY) {
moveX = Math.round(moveX);
moveY = Math.round(moveY);
for (var k = 0; k < this.range; k++) {
var range = Math.round(Math.sqrt(this.range * this.range - k * k)); //获取圆形区域
this.doDraw(k + moveX, range, moveY, moveX);
this.doDraw(moveX - k, range, moveY, moveX);
}
this.doDrawLine(moveX, moveY);
},
doDraw: function(j, range, moveY, moveX) {
var alpha, start = moveY - range,
end = moveY + range,
flag = false;
for (var i = start; i < end; i++) {
var id = i + "|" + j;
var div = document.getElementById(id);
if (div != undefined && div != null) {
flag = false
for (k = this.range - this.fuzzy, m = 0; k < this.range; k++, m++) {
alpha = m * 100 / this.fuzzy;
if ((j - moveX) * (j - moveX) + (i - moveY) * (i - moveY) >= k * k) {
div.style.filter = 'alpha(opacity=' + alpha + ')';
div.style.opacity = alpha / 100;
flag = true;
}
}
if (!flag) {
div.style.background = "";
if (this.drawsed.indexOf(id) < 0) {
this.drawsed.push(id);
}
if (this.drawsed.length / this.draws.length > this.rate) {
if (!this.successed) {
this.successed = true;
this.drawer.mouseup();
if (this.success != undefined && typeof(this.success) == "function")
this.success.call(this);
return;
}
}
}
}
}
},
doDrawLine: function(moveX, moveY) {
if (this.lastMoveX != null && this.lastMoveY != null) {
var k = -(moveY - this.lastMoveY) / (moveX - this.lastMoveX);
var startX, endX, startY, endY, lineX, lineY;
if (moveX < this.lastMoveX) {
endX = this.lastMoveX;
startX = moveX;
endY = this.lastMoveY;
startY = moveY;
} else {
endX = moveX;
startX = this.lastMoveX
endY = moveY;
startY = this.lastMoveY;
}
for (var i = 0; i < endX - startX; i++) {
lineX = startX + i;
lineY = Math.round(startY - i * k);
this.doDraw(lineX, this.range, lineY, lineX);
}
}
this.lastMoveX = moveX;
this.lastMoveY = moveY;
}
}
}(window));
</script>
</head>
<body>
<div id="rectangle">一等奖</div>
<script>
var gua = new guagua({
parent: document.getElementById("rectangle"),
unit: 4, //颗粒大小
range: 10, //绘制范围
fuzzy: 5, //羽化范围
rate: 0.6,//挂出的面积比例
success: function () {
alert("恭喜您中奖了");
}
});
</script>
</body>
</html>

js刮刮乐代码实例,这样的场景在实际项目中还是用的比较多的,关于js刮刮乐代码实例就介绍到这了。

js刮刮乐代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容