132 lines
3.0 KiB
JavaScript
132 lines
3.0 KiB
JavaScript
function getRandomColor() {
|
||
var letters = '0123456789ABCDEF'.split('');
|
||
var color = '#';
|
||
for (var i = 0; i < 6; i++) {
|
||
color += letters[Math.floor(Math.random() * 16)];
|
||
}
|
||
return color;
|
||
}
|
||
|
||
function sleep(sleepTime) {
|
||
var startTime = new Date().getTime();
|
||
while (true) if (new Date().getTime() - startTime > sleepTime) break;
|
||
}
|
||
|
||
var mouse_on = false, text_html;
|
||
var change_time = 0;
|
||
|
||
function reset_color() {
|
||
set_color(1, "#F56C6C");
|
||
set_color(2, "#E6A23C");
|
||
set_color(3, "#67C23A");
|
||
change_time = 0;
|
||
}
|
||
|
||
function change_color() {
|
||
change_time += 1;
|
||
if (change_time > 6) {
|
||
set_color(1, "random");
|
||
set_color(2, "random");
|
||
set_color(3, "random");
|
||
}
|
||
else if (change_time % 3 == 0) {
|
||
set_color(1, "#F56C6C");
|
||
set_color(2, "#E6A23C");
|
||
set_color(3, "#67C23A");
|
||
}
|
||
else if (change_time % 3 == 1) {
|
||
set_color(2, "#F56C6C");
|
||
set_color(3, "#E6A23C");
|
||
set_color(1, "#67C23A");
|
||
}
|
||
else if (change_time % 3 == 2) {
|
||
set_color(3, "#F56C6C");
|
||
set_color(1, "#E6A23C");
|
||
set_color(2, "#67C23A");
|
||
}
|
||
}
|
||
|
||
function animation_play() {
|
||
state = $(".ball").css("animation-play-state");
|
||
if (state == "paused") $(".ball").css("animation-play-state", "running");
|
||
else $(".ball").css("animation-play-state", "paused");
|
||
}
|
||
|
||
$(".aside_con").hover(function () {
|
||
mouse_on = true;
|
||
text_html = $(this);
|
||
});
|
||
|
||
function reset_size() {
|
||
mouse_on = false;
|
||
$(this).css("font-size", "16px");
|
||
text_html.css("color", "black");
|
||
}
|
||
|
||
function text_bigger() {
|
||
if (mouse_on === true) {
|
||
var text_size = parseFloat(text_html.css("font-size"));
|
||
if (text_size < 30) {
|
||
text_size += 0.1;
|
||
text_html.css("font-size", String(text_size) + "px");
|
||
}
|
||
}
|
||
}
|
||
|
||
function text_colorful() {
|
||
if (mouse_on === true) {
|
||
var text_size = parseFloat(text_html.css("font-size"));
|
||
if (text_size < 30) {
|
||
text_html.css("color", getRandomColor());
|
||
}
|
||
}
|
||
}
|
||
|
||
function set_color(id, color) {
|
||
if (color == "random") $(".c" + String(id)).css("background-color", getRandomColor());
|
||
else $(".c" + String(id)).css("background-color", color);
|
||
}
|
||
|
||
setInterval(text_bigger, 10);
|
||
setInterval(text_colorful, 100);
|
||
|
||
$(window).resize(function () {
|
||
text_html = $(this);
|
||
});
|
||
|
||
function init() {
|
||
set_color(1, "#F56C6C");
|
||
set_color(2, "#E6A23C");
|
||
set_color(3, "#67C23A");
|
||
$(".aside_con").mouseleave(reset_size);
|
||
}
|
||
|
||
init();
|
||
|
||
// tippy('.aside_con', {
|
||
// content: '点我点我',
|
||
// placement: 'right',
|
||
// distance: +30
|
||
// });
|
||
|
||
function debug_f(){
|
||
console.log($(".ball").offset().left>$(".c1").offset().left);
|
||
}
|
||
|
||
function getItemColors (colorLevel) {
|
||
var colors= [];
|
||
//默认的最深颜色
|
||
var red = 134,green = 108, blue = 184;
|
||
//最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105
|
||
var maxRed = 105,maxGreen = 131,maxBlue = 55;
|
||
var level = colorLevel;
|
||
while(level--) {
|
||
colors.push( 'rgb('+red +','+green+','+blue+')');
|
||
red += parseInt(maxRed/colorLevel);
|
||
green += parseInt(maxGreen/colorLevel);
|
||
blue += parseInt(maxBlue/colorLevel);
|
||
}
|
||
return colors;
|
||
}
|
||
|
||
setInterval(debug_f, 100); |