首页 博客模板 网站素材 工具下载 建站教程 个人博客 生活咨询 博客大全

7.【鼠标特效】鼠标点击网页出现五颜六色圆圈

返回首页 浏览次数:
建华兄
微信号:S411998413 2018-05-31
使用方法:将下载的js代码放入你的网站任何位置,js文件上传到你的网站。不会联系QQ1249721215



下面代码不用复制,下载的文件里面有
<script src="js/mo.min.js"></script>
<script src="js/mojs-player.min.js"></script>
<script>
'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();
});
</script>

转载请注明本文转自“建华兄个人博客
下载失效联系QQ:1249721215
本站所有下载解压密码为:jianhuax.com



热门排行