html5语言js效果,js实现鼠标点击效果(html5)

【实例简介】

【实例截图】

【核心代码】

鼠标点击效果

body {

background: #F8F4E3;

}

.message {

position: fixed;

width: 80%;

text-align: center;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

font-size: 1.2rem;

font-family: 'Baloo Bhaina', cursive;

color: #706C61;

}

点击任何地方看效果

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i ) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }

window.CP.exitedLoop(1);

}

window.CP.exitedLoop(2);

return target; };

var OPTS = {

fill: 'none',

radius: 25,

strokeWidth: { 50: 0 },

scale: { 0: 1 },

angle: { 'rand(-35, -70)': 0 },

duration: 500,

left: 0,

top: 0,

easing: 'cubic.out'

};

var circle1 = new mojs.Shape(_extends({}, OPTS, {

stroke: '#FF8966'

}));

var circle2 = new mojs.Shape(_extends({}, OPTS, {

radius: { 0: 15 },

strokeWidth: { 30: 0 },

stroke: '#E5446D',

delay: 'rand(75, 150)'

}));

document.addEventListener('click', function (e) {

circle1.tune({ x: e.pageX, y: e.pageY }).replay();

circle2.tune({ x: e.pageX, y: e.pageY }).replay();

});