类似抽奖的动画

PROMULGATOR

骑扫帚的小毛驴

中国

← 可随意调整方块位置，保证小球按照路线运动

→ 步骤条功能实现

相关代码

类似抽奖的动画

幸运抽奖程序

jQuery实现抽奖

jquery转盘游戏抽奖

简易的jQuery抽奖

vue抽奖弹框

鼠标悬停方块旋转动画

Html

Css

Js

.a {
	width:600px;
	height:600px;
	background:#cffdf;
	margin:20px auto;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:column nowrap;
}
.b {
	width:30px;
	height:30px;
	border-radius:50%;
	background:red;
	position:absolute;
}
.a .img {
	display:inline-block;
	width:120px;
	height:120px;
}
.a .row {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:row nowrap;
}
.center {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:row nowrap;
}
.cenc {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:column nowrap;
}
.cenregion {
	width:340px;
	height:340px;
	margin:9px;
	border:1px solid #ccc;
	border-radius:3px;
}

var anim = 0,
     tob, lor, lors, tobs, w1, h1, w2, h2, ballarr = new Array(),
     tim, timer = 0;
 $(function() {
     for (var i = 0; i < $(".a .img").length; i++) {
         $(".a .img").eq(i).css("background", getRandomColor());
     }
 });

var getRandomColor = function() {
     return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
 }

function start() {
     creatball();
 }

function b() {
     console.log(ballarr.length)
     if (ballarr.length != 0) {
         var balla = ballarr[0];
         roll(balla);
         ballarr.shift();
         if (ballarr.length == 0) {
             clearInterval(tim);
             timer = 0;
         }
     } else {
         clearInterval(tim);
         timer = 0;
     }
 }

function roll(anim) {
     var a = $(".row").width() - 120;
     var b = $(".a").height() - 120;
     var c = $(".b").width();
     var d = a;
     var e = a + b;
     var f = a + b + a;
     var g = a + b + a + b;
     var s = 2280 + 1440 * 6;
     var h = Math.floor(s / g);
     var k = s % g;
     lor = $(".row").width() - ($(".a .img").width()) / 2 - c / 2;
     tob = $(".a").height() - ($(".a .img").height()) / 2 - c / 2;
     lors = ($(".a .img").width()) / 2 - c / 2;
     tobs = ($(".a .img").height()) / 2 - c / 2;
     var l = $(".row").width() - $(".a .img").width();
     var rollflag = false;
     var fr = ($(".row").width()) / 2 - c / 2;
     $("." + anim).animate({
         "left": fr,
         "top": lors
     }, 1500, "backBoth");
     for (var i = 0; i < h - 2; i++) {
         rollanimate(anim);
         if (i == (h - 3)) {
             rollflag = true;
         }
     }
     if (rollflag) {
         rollonce(anim);
     }
     if (k < d) {
         $("." + anim).animate({
             left: k + lors
         }, 1800, "linear");
     }
     if (d <= k && k < e) {
         $("." + anim).animate({
             left: lor
         }, 1800, "linear");
         var x = k - l;
         $("." + anim).animate({
             top: x + tobs
         }, 2200, "linear");
     }
     if (e <= k && k < f) {
         $("." + anim).animate({
             left: lor
         }, 1800, "linear");
         $("." + anim).animate({
             top: tob
         }, 2200, "linear");
         var x = l - k + l * 2;
         $("." + anim).animate({
             left: x + lors
         }, 2600, "linear");
     }
     if (f <= k && k < g) {
         $("." + anim).animate({
             left: lor
         }, 1800, "linear");
         $("." + anim).animate({
             top: tob
         }, 2200, "linear");
         $("." + anim).animate({
             left: lors
         }, 2600, "linear");
         var x = l - k + l * 3;
         $("." + anim).animate({
             top: x + tobs
         }, 3000, "linear");
     }

}

function rollanimate(anim) {
     $("." + anim).animate({
         left: lor
     }, 100, "linear");
     $("." + anim).animate({
         top: tob
     }, 100, "linear");
     $("." + anim).animate({
         left: lors
     }, 100, "linear");
     $("." + anim).animate({
         top: tobs
     }, 100, "linear");
 }

function rollonce(anim) {
     $("." + anim).animate({
         left: lor
     }, 200, "linear");
     $("." + anim).animate({
         top: tob
     }, 400, "linear");
     $("." + anim).animate({
         left: lors
     }, 600, "linear");
     $("." + anim).animate({
         top: tobs
     }, 800, "linear");
     $("." + anim).animate({
         left: lor
     }, 1000, "linear");
     $("." + anim).animate({
         top: tob
     }, 1200, "linear");
     $("." + anim).animate({
         left: lors
     }, 1400, "linear");
     $("." + anim).animate({
         top: tobs
     }, 1600, "linear");
 }

function creatball() {
     w1 = $(".a .img").width() + 10;
     h1 = $(".a .img").height() + 10;
     w2 = $(".a .img").width() + 10 + $(".cenregion").width() - $(".b").width();
     h2 = $(".a .img").height() + 10 + $(".cenregion").height() - $(".b").height();
     var w = randomFrom(w1, w2);
     var h = randomFrom(h1, h2);
     var ball = document.createElement("div");
     anim++;
     ball.classList.add("anim_" + anim);
     ball.classList.add("b");
     document.getElementsByClassName("cenregion")[0].appendChild(ball);
     $(".anim_" + anim).css({
         "left": w,
         "top": h
     });
     ballarr.push("anim_" + anim);
     if (timer == 0) {
         tim = setInterval("b()", 5000);
         timer = 1;
     }
 }

function a() {
     for (var i = 0; i < $(".b").length; i++) {
         var w = randomFrom(w1, w2);
         var h = randomFrom(h1, h2);
         $(".anim_" + i).animate({
             "left": w,
             "top": h
         }, 2000);
     }
 }

function randomFrom(lowerValue, upperValue) {
     return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
 }
 $.extend(jQuery.easing, {
     easeIn: function(x, t, b, c, d) { //加速曲线
         return c * (t /= d) * t + b;
     },
     easeOut: function(x, t, b, c, d) { //减速曲线
         return -c * (t /= d) * (t - 2) + b;
     },
     easeBoth: function(x, t, b, c, d) { //加速减速曲线
         if ((t /= d / 2) < 1) {
             return c / 2 * t * t + b;
         }
         return -c / 2 * ((--t) * (t - 2) - 1) + b;
     },
     easeInStrong: function(x, t, b, c, d) { //加加速曲线
         return c * (t /= d) * t * t * t + b;
     },
     easeOutStrong: function(x, t, b, c, d) { //减减速曲线
         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
     },
     easeBothStrong: function(x, t, b, c, d) { //加加速减减速曲线
         if ((t /= d / 2) < 1) {
             return c / 2 * t * t * t * t + b;
         }
         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
     },
     elasticIn: function(x, t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
         if (t === 0) {
             return b;
         }
         if ((t /= d) == 1) {
             return b + c;
         }
         if (!p) {
             p = d * 0.3;
         }
         if (!a || a < Math.abs(c)) {
             a = c;
             var s = p / 4;
         } else {
             var s = p / (2 * Math.PI) * Math.asin(c / a);
         }
         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
     },
     elasticOut: function(x, t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
         if (t === 0) {
             return b;
         }
         if ((t /= d) == 1) {
             return b + c;
         }
         if (!p) {
             p = d * 0.3;
         }
         if (!a || a < Math.abs(c)) {
             a = c;
             var s = p / 4;
         } else {
             var s = p / (2 * Math.PI) * Math.asin(c / a);
         }
         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
     },
     elasticBoth: function(x, t, b, c, d, a, p) {
         if (t === 0) {
             return b;
         }
         if ((t /= d / 2) == 2) {
             return b + c;
         }
         if (!p) {
             p = d * (0.3 * 1.5);
         }
         if (!a || a < Math.abs(c)) {
             a = c;
             var s = p / 4;
         } else {
             var s = p / (2 * Math.PI) * Math.asin(c / a);
         }
         if (t < 1) {
             return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                 Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
         }
         return a * Math.pow(2, -10 * (t -= 1)) *
             Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
     },
     backIn: function(x, t, b, c, d, s) { //回退加速（回退渐入）
         if (typeof s == 'undefined') {
             s = 1.70158;
         }
         return c * (t /= d) * t * ((s + 1) * t - s) + b;
     },
     backOut: function(x, t, b, c, d, s) {
         if (typeof s == 'undefined') {
             s = 3.70158; //回缩的距离
         }
         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
     },
     backBoth: function(x, t, b, c, d, s) {
         if (typeof s == 'undefined') {
             s = 1.70158;
         }
         if ((t /= d / 2) < 1) {
             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
         }
         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
     },
     bounceIn: function(x, t, b, c, d) { //弹球减振（弹球渐出）
         return c - this['bounceOut'](x, d - t, 0, c, d) + b;
     },
     bounceOut: function(x, t, b, c, d) {
         if ((t /= d) < (1 / 2.75)) {
             return c * (7.5625 * t * t) + b;
         } else if (t < (2 / 2.75)) {
             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
         } else if (t < (2.5 / 2.75)) {
             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
         }
         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
     },
     bounceBoth: function(x, t, b, c, d) {
         if (t < d / 2) {
             return this['bounceIn'](x, t * 2, 0, c, d) * 0.5 + b;
         }
         return this['bounceOut'](x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
     }

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

类似抽奖的动画



代码描述：可生成多个小球，发送到相应位置，然后在一定时间之后按照约定的动画轨迹旋转，并且最后有减速的效果

点击开始按钮可以生成多个位置随机范围内的小球，在设置的时间后自动按照动画轨迹转动，减速，停止
**js代码里面轨迹描述的方法是在网上借鉴过来的

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>类似抽奖的动画-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号