利用JavaScript编写一个花里胡哨的点击按钮
更新时间：2022年03月03日 08:34:10 作者：前端老实人
这篇文章主要介绍了如何利用HTML+CSS+JavaScript制作一个花里胡哨的点击按钮。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
正片
小轮播图滑动滚播，好不好看你说了算。
结构就两行
<main>
<div class="grid">
<div class="grid__item theme-1">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Send</button>
</div>
<div class="grid__item theme-2">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Upload</button>
</div>
<div class="grid__item theme-3">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Delete</button>
</div>
<div class="grid__item theme-4">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Submit</button>
</div>
<div class="grid__item theme-5">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">refresh</button>
</div>
<div class="grid__item theme-6">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Bookmark</button>
</div>
<div class="grid__item theme-7">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Subscribe</button>
</div>
<div class="grid__item theme-8">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Logout</button>
</div>
<div class="grid__item theme-9">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Add to cart</button>
</div>
<div class="grid__item theme-10">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Pause</button>
</div>
<div class="grid__item theme-11">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Register</button>
</div>
<div class="grid__item theme-12">
<button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></use>
</svg></button>
<button class="particles-button">Export</button>
</div>
</div>
</main>
<script src='js/anime.min.js'></script>
<script src='js/particles.js'></script>
<script src='js/demo.js'></script>
样式
样式代码太长了，影响阅读
表现
关键代码，总共没几行，让它动起来，你们直接复制拿去用就行
/* eslint-disable */
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('animejs')) :
typeof define === 'function' && define.amd ? define(['animejs'], factory) :
(global.Particles = factory(global.anime));
}(this, (function(anime) {
'use strict';
/* eslint-enable */
function Particles(element, options) {
this.el = getElement(element);
this.options = extend({color: getCSSValue(this.el, 'background-color')}, this.defaults, options);
this.init();
}
Particles.prototype = {
defaults: {
type: 'circle',
style: 'fill',
canvasPadding: 150,
duration: 1000,
easing: 'easeInOutCubic',
direction: 'left',
size: function() { return Math.floor((Math.random() * 3) + 1); },
speed: function() { return rand(4); },
particlesAmountCoefficient: 3,
oscillationCoefficient: 20
},
init: function () {
this.particles = [];
this.frame = null;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.className = 'particles-canvas';
this.canvas.style = 'display:none;';
this.wrapper = document.createElement('div');
this.wrapper.className = 'particles-wrapper';
this.el.parentNode.insertBefore(this.wrapper, this.el);
this.wrapper.appendChild(this.el);
this.parentWrapper = document.createElement('div');
this.parentWrapper.className = 'particles';
this.wrapper.parentNode.insertBefore(this.parentWrapper, this.wrapper);
this.parentWrapper.appendChild(this.wrapper);
this.parentWrapper.appendChild(this.canvas);
},
loop: function () {
this.updateParticles();
this.renderParticles();
if (this.isAnimating()) {
this.frame = requestAnimationFrame(this.loop.bind(this));
}
},
updateParticles: function () {
var p;
for (var i = 0; i < this.particles.length; i++) {
p = this.particles[i];
if (p.life > p.death) {
this.particles.splice(i, 1);
} else {
p.x += p.speed;
p.y = this.o.oscillationCoefficient * Math.sin(p.counter * p.increase);
p.life++;
p.counter += this.disintegrating ? 1 : -1;
}
}
if (!this.particles.length) {
this.pause();
this.canvas.style.display = 'none';
if (is.fnc(this.o.complete)) {
this.o.complete();
}
}
},
renderParticles: function () {
this.ctx.clearRect(0, 0, this.width, this.height);
var p;
for (var i = 0; i < this.particles.length; i++) {
p = this.particles[i];
if (p.life < p.death) {
this.ctx.translate(p.startX, p.startY);
this.ctx.rotate(p.angle * Math.PI / 180);
this.ctx.globalAlpha = this.disintegrating ? 1 - p.life / p.death : p.life / p.death;
this.ctx.fillStyle = this.ctx.strokeStyle = this.o.color;
this.ctx.beginPath();
if ( this.o.type === 'circle' ) {
this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
}
else if ( this.o.type === 'triangle' ) {
this.ctx.moveTo(p.x, p.y);
this.ctx.lineTo(p.x+p.size, p.y+p.size);
this.ctx.lineTo(p.x+p.size, p.y-p.size);
}
else if ( this.o.type === 'rectangle' ){
this.ctx.rect(p.x, p.y, p.size, p.size);
}
if ( this.o.style === 'fill' ) {
this.ctx.fill();
}
else if ( this.o.style === 'stroke' ) {
this.ctx.closePath();
this.ctx.stroke();
}
this.ctx.globalAlpha = 1;
this.ctx.rotate(-p.angle * Math.PI / 180);
this.ctx.translate(-p.startX, -p.startY);
}
}
},
play: function () {
this.frame = requestAnimationFrame(this.loop.bind(this));
},
pause: function () {
cancelAnimationFrame(this.frame);
this.frame = null;
},
addParticle: function (options) {
var frames = this.o.duration * 60 / 1000;
var speed = is.fnc(this.o.speed) ? this.o.speed() : this.o.speed;
this.particles.push({
startX: options.x,
startY: options.y,
x: this.disintegrating ? 0 : speed * -frames,
y: 0,
angle: rand(360),
counter: this.disintegrating ? 0 : frames,
increase: Math.PI * 2 / 100,
life: 0,
death: this.disintegrating ? (frames - 20) + Math.random() * 40 : frames,
speed: speed,
size: is.fnc(this.o.size) ? this.o.size() : this.o.size
});
},
addParticles: function (rect, progress) {
var progressDiff = this.disintegrating ? progress - this.lastProgress : this.lastProgress - progress;
this.lastProgress = progress;
var x = this.options.canvasPadding;
var y = this.options.canvasPadding;
var progressValue = (this.isHorizontal() ? rect.width : rect.height) * progress + progressDiff * (this.disintegrating ? 100 : 220);
if (this.isHorizontal()) {
x += this.o.direction === 'left' ? progressValue : rect.width - progressValue;
} else {
y += this.o.direction === 'top' ? progressValue : rect.height - progressValue;
}
var i = Math.floor(this.o.particlesAmountCoefficient * (progressDiff * 100 + 1));
if (i > 0) {
while (i--) {
this.addParticle({
x: x + (this.isHorizontal() ? 0 : rect.width * Math.random()),
y: y + (this.isHorizontal() ? rect.height * Math.random() : 0)
});
}
}
if (!this.isAnimating()) {
this.canvas.style.display = 'block';
this.play();
}
},
addTransforms: function (value) {
var translateProperty = this.isHorizontal() ? 'translateX' : 'translateY';
var translateValue = this.o.direction === 'left' || this.o.direction === 'top' ? value : -value;
this.wrapper.style[transformString] = translateProperty + '('+ translateValue +'%)';
this.el.style[transformString] = translateProperty + '('+ -translateValue +'%)';
},
disintegrate: function (options) {
if (!this.isAnimating()) {
this.disintegrating = true;
this.lastProgress = 0;
this.setup(options);
var _ = this;
this.animate(function(anim) {
var value = anim.animatables[0].target.value;
_.addTransforms(value);
if (_.o.duration) {
_.addParticles(_.rect, value / 100, true);
}
});
}
},
integrate: function (options) {
if (!this.isAnimating()) {
this.disintegrating = false;
this.lastProgress = 1;
this.setup(options);
var _ = this;
this.animate(function(anim) {
var value = anim.animatables[0].target.value;
setTimeout(function() {
_.addTransforms(value);
}, _.o.duration);
if (_.o.duration) {
_.addParticles(_.rect, value / 100, true);
}
});
}
},
setup: function (options) {
this.o = extend({}, this.options, options);
this.wrapper.style.visibility = 'visible';
if (this.o.duration) {
this.rect = this.el.getBoundingClientRect();
this.width = this.canvas.width = this.o.width || this.rect.width + this.o.canvasPadding * 2;
this.height = this.canvas.height = this.o.height || this.rect.height + this.o.canvasPadding * 2;
}
},
animate: function (update) {
var _ = this;
anime({
targets: {value: _.disintegrating ? 0 : 100},
value: _.disintegrating ? 100 : 0,
duration: _.o.duration,
easing: _.o.easing,
begin: _.o.begin,
update: update,
complete: function() {
if (_.disintegrating) {
_.wrapper.style.visibility = 'hidden';
}
}
});
},
isAnimating: function () {
return !!this.frame;
},
isHorizontal: function () {
return this.o.direction === 'left' || this.o.direction === 'right';
}
};
// Utils
var is = {
arr: function (a) { return Array.isArray(a); },
str: function (a) { return typeof a === 'string'; },
fnc: function (a) { return typeof a === 'function'; }
};
function stringToHyphens(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
function getCSSValue(el, prop) {
if (prop in el.style) {
return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
}
}
var t = 'transform';
var transformString = (getCSSValue(document.body, t) ? t : '-webkit-' + t);
function extendSingle(target, source) {
for (var key in source)
target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];
return target;
}
function extend(target) {
if (!target) target = {};
for (var i = 1; i < arguments.length; i++)
extendSingle(target, arguments[i]);
return target;
}
function rand(value) {
return Math.random() * value - value / 2;
}
function getElement(element) {
return is.str(element) ? document.querySelector(element) : element;
}
return Particles;
})));
以上就是利用JavaScript编写一个花里胡哨的点击按钮的详细内容，更多关于JavaScript点击按钮的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了js获取鼠标位置的方法,结合实例形式详细分析了JavaScript响应鼠标事件获取并操作页面元素属性的相关技巧,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了js实现照片墙功能的方法,以一个完整实例形式分析了js实现照片墙的css与js的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
这篇文章主要介绍了javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）,涉及javascript回调、遍历等实现技巧,需要的朋友可以参考下2015-07-07
bootstrap和jQuery.Gantt的css冲突 如何解决
这篇文章主要介绍了bootstrap和jQuery.Gantt的css冲突，本文给出了解决冲突的解决方法，感兴趣的小伙伴们可以参考一下2016-05-05
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-02-02
事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件，本文给大家重点介绍js中的事件委托及好处，一起看看吧2016-07-07
uniapp组件传值的方法(父传子,子传父,对象传值)实战案例
现在的前端开发中基本上都是组件化开发的,下面这篇文章主要给大家介绍了关于uniapp组件传值(父传子,子传父,对象传值)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
做一个简单的设置网页，因为需要重启设备功能，于是就想在上面加一个倒计时弹窗的界面，下面是具体的实现，大家可以参考下2014-03-03
最新评论