基于SVG超炫爆裂式关闭模态窗口特效,很不错的特效点击this.$close = $('#js-close-button');this.$modal = $('#js-modal');
this.$modalHolder = $('#js-modal-holder');
this.$protoImage = $('.js-proto-image');
this.$breakParts = $('#js-break-parts');
this.$modalOverlay = $('#js-modal-overlay');
this.$hint1 = $('#js-hint1');
this.$hint2 = $('#js-hint2');
this.$burst = $('#js-burst');各种的动态。
首先引用文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src='js/howler.min.js'></script>
<script type="text/javascript" src='js/tween.min_1.js'></script>
<script type="text/javascript" src='js/html2canvas.js'></script>
<script type="text/javascript" src="js/index.js"></script>
爆裂式关闭 带着爆裂声音,核心代码,很棒的特效大家可以学习一下。
Main.prototype.showHints = function(delay) {
var HIDE_DELAY, HINT2_DELAY, it;
it = this;
HIDE_DELAY = 5000;
HINT2_DELAY = 200;
this.hint1T = new TWEEN.Tween({
p: 0
}).to({
p: 1
}, 500).onUpdate(function() {
return it.$hint1.css({
opacity: this.p
});
}).delay(delay).start();
this.hint2T = new TWEEN.Tween({
p: 0
}).to({
p: 1
}, 500).onUpdate(function() {
return it.$hint2.css({
opacity: this.p
});
}).delay(delay + HINT2_DELAY).start();
return this.hintHideT = new TWEEN.Tween({
p: 0
}).to({
p: 1
}, 500).onUpdate(function() {
it.$hint1.css({
opacity: 1 - this.p
});
return it.$hint2.css({
opacity: 1 - this.p
});
}).delay(delay + HINT2_DELAY + HIDE_DELAY).start();
};
Main.prototype.showModal = function(isFirst) {
var tm;
if (isFirst) {
tm = setTimeout((function(_this) {
return function() {
_this.$modal.find('input').val('');
return clearTimeout(tm);
};
})(this), 10);
}
this.initEffectTweens(isFirst);
return this.showModalT.start();
};
Main.prototype.listeners = function() {
var $input;
this.$showModal.on('click', (function(_this) {
return function() {
return _this.showModal();
};
})(this));
this.$modal.on('keyup', 'input', function(e) {
var $it, k, text;
$it = $(e.target);
text = $it.val();
$it.toggleClass('is-fill', !!text);
if ($it.attr('type') === 'text') {
text = text.replace(/\s/g, '');
}
k = e.keyCode;
if ((k > 48 && k < 90) || (k === 48 || k === 45 || k === 32)) {
return $it.val(text);
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791