一、鼠标点击出现爱国，民主等字样
import $ from 'jquery';
var a_idx = 0;
$(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 9999999,
"top": y - 20,
"left": x,
"font-size":"12px",
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function(){
$i.remove();
});
});
});放在共用的footer.vue中即可
二、页面显示动态彩带
<script id="ribbon" size="300" alpha="0.1" zindex="-1" src="/static/js/canvas-ribbon.js"></script>参数说明：
size：功能区的大小，默认值：90。
alpha：行的不透明度（0~1），默认值：0.6。
zIndex：z空间的索引，默认值：-1。目前是暂时在index.html中引入
三、粒子线效果
<script color="0, 255, 255" opacity="0.7" zindex="-1" count="140" src="/static/js/canvas-nest.min.js"></script>参数说明：
color="255,0,0" 背景粒子线的颜色
opacity="0.5" 背景粒子线的透明度，一般设置成 0.5-1 之间
count="99" 背景粒子线的密度，
zIndex="-2" z 轴坐标默认-1目前是暂时在index.html中引入
四、音乐播放器
<link rel="stylesheet" href="/static/wly/APlayer.min.css">
<script src="/static/wly/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="768991704" data-server="netease" data-autoplay="true" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="/static/wly/Meting.min.js"></script>参数说明：
| 选项 | 默认 | 描述 |
|---|---|---|
| id(编号) | require | 歌曲ID /播放列表ID /专辑ID /搜索关键字 |
| server(平台) | require | 音乐平台：netease，tencent，kugou，xiami，baidu |
| type（类型） | require | song，playlist，album，search，artist |
| auto（支持类种 类） | options | 音乐链接，支持：netease，tencent，xiami |
| fixed（固定模式） | false | 启用固定模式，默认false |
| mini（迷你模式） | false | 启用迷你模式,默认false |
| autoplay（自动播放） | false | 音频自动播放，默认false |
| theme(主题颜色) | #2980b9 | 默认#2980b9 |
| loop（循环） | all | 播放器循环播放，值：“all”，one”，“none” |
| order(顺序) | list | 播放器播放顺序，值：“list”，“random” |
| preload(加载) | auto | 值：“none”，“metadata”，“'auto” |
| volume（声量） | 0.7 | 默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用 |
| mutex（限制） | true | 防止同时播放多个玩家，在该玩家开始播放时暂停其他玩家 |
| lrc-type（歌词） | 0 | 歌词显示 |
| list-folded（列表折叠） | false | 指示列表是否应该首先折叠 |
| list-max-height（最大高度） | 340px | 列出最大高度 |
| storage-name（储存名称） | metingjs | 存储播放器设置的localStorage键 |
目前是暂时在index.html中引入
评论
暂无评论
评论(1)