This article mainly introduces my personal blog program Liu Chuanfeng page using beautification function (based on JS implementation) :
1. Mouse click appears different color love special effects
2. The floating polygon of the page moves with the mouse
3. Say something every day
1. Mouse click appears love special effects
I often see in blog park or other personal websites that different colors of hearts, fireworks effects, strong and democratic fonts can appear when clicking the mouse. I find it very interesting, so I have studied it, and the details are as follows:
Preview effect drawing
JS code implementation
Mouse click appears different color heart:
// Mouse click on the heart
!function(e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += 004., s[e].alpha -= 013., s[e].el.style.cssText = "left:" + s[e].x + "px; top:" + s[e].y + "px; opacity:" + s[e].alpha + "; transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg); background:" + s[e].color + "; z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function"= =typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(),
o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart",
s.push({
el: a,
x: e.clientX - 5.y: e.clientY - 5.scale: 1.alpha: 1.color: c()
}),
t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch(t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head") [0].appendChild(a)
}
function c() {
return "rgb("+ ~ ~ (255 * Math.random()) + ","+ ~ ~ (255 * Math.random()) + ","+ ~ ~ (255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
function(e) {
setTimeout(e, 1e3 / 60)
},
i(".heart{width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }.heart:after,.heart:before{content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; }.heart:after{top: -5px; }.heart:before{left: -5px; }"),
n(),
r()
} (window.document);
Copy the codeMouse click effect “rich, strong and democratic”
<script>
// Define the subscript of the fetch term
var a_idx = 0;
jQuery(document).ready(function($) {
// The event is triggered when the body is clicked
$("body").click(function(e) {
// The words to display
var a = new Array("Rich"."Democracy"."Civilization"."Harmony"."Freedom"."Equality"."Justice"."The rule of law"."Patriotic"."Professional"."Good faith"."Friendly");
// Set words to span tags
var $i = $("<span/>").text(a[a_idx]);
// the subscript equals the original subscript +1
a_idx = (a_idx + 1)% a.length;
// Get the position of the mouse pointer relative to the left and right edges of the document.
// get the pointer coordinates of x and y
var x = e.pageX, y = e.pageY;
// Add a CSS style to the span tag defined by $I over the mouse pointer
$i.css({"z-index" : 999999."top" : y - 20."left" : x,
"position" : "absolute"."font-weight" : "bold"."color" : "#ff6651"
});
// Add the tag to the body
$("body").append($i);
The animate() method executes a custom animation of the CSS property set.
// This method changes an element from one state to another using CSS styles. CSS property values are gradually changed so that animation effects can be created.
/ / see http://www.w3school.com.cn/jquery/effect_animate.asp for details
$i.animate({
// Move the position up 180
"top" : y - 180."opacity" : 0
//1500 animation speed
}, 1500.function() {
// Automatically delete when time is up
$i.remove();
});
});
});
</script>
Copy the code2. The floating polygon of the page moves with the mouse
Effect preview
JS code implementation
// Mouse draws polygons
! function() {
// Encapsulate method to reduce file size after compression
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
// Encapsulate method to reduce file size after compression
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
// Get configuration parameters
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; // The currently loaded script
return {
l: script_len, // The length used to generate the ID
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity".0.5), //opacity
c: get_attribute(script, "color"."0 0,"), //color
n: get_attribute(script, "count".99) //count
};
}
// Set the canvas height and width
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
// The drawing process
function draw_canvas() {
context.clearRect(0.0, canvas_width, canvas_height);
// random line and current position associative array
var e, i, d, x_dist, y_dist, dist; // Temporary node
// Iterate over each point
random_points.forEach(function(r, idx) {
r.x += r.xa,
r.y += r.ya, / / move
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1.// Hit the boundary and bounce back
context.fillRect(r.x - 0.5, r.y - 0.5.1.1); // Draw a point with width and height 1
// Start at the next point
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
// The current point exists
if (null! == e.x &&null! == e.y) { x_dist = r.x - e.x;// the x wheelbase is away from l
y_dist = r.y - e.y; // the y base is off n
dist = x_dist * x_dist + y_dist * y_dist; // Total distance, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), // Accelerate as you approach
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
// Create the canvas and add it to the body
var the_canvas = document.createElement("canvas"), / / the canvas
config = get_config_option(), / / configuration
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
window.setTimeout(func, 1000 / 45);
}, random = Math.random,
current_point = {
x: null.// Current mouse x
y: null.// Current mouse y
max: 20000 // Circle radius squared
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed; top:0; left:0; z-index:" + config.z + "; opacity:" + config.o;
get_by_tagname("body") [0].appendChild(the_canvas);
// Initialize the canvas size
set_canvas_size();
window.onresize = set_canvas_size;
// When the mouse position is stored, release the current position information when leaving
window.onmousemove = function(e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
}, window.onmouseout = function() {
current_point.x = null;
current_point.y = null;
};
// Randomly generate config.n line position information
for (var random_points = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, // Random position
y = random() * canvas_height,
xa = 2 * random() - 1.// Random direction of motion
ya = 2 * random() - 1;
/ / random points
random_points.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 6000 // Attach distance
});
}
all_array = random_points.concat([current_point]);
// Draw after 0.1 seconds
setTimeout(function() {
draw_canvas();
}, 100); } ();Copy the code3. Say something every day
The main function is that every time you refresh the page, there will be different sentences, which are from cartoons, novels, the network and so on.
A word of the day website: hitokoto.cn/
About the website:
Whether it’s anime, novels or the Internet, wherever we are, we always see one or two sentences that can Pierce your heart. We put these sentences together to form a network of words to deliver more touching. If we can, we hope we don’t stop service that day.
Simply put, a word refers to a sentence, which can be a line in an anime or a variety of jokes on the Internet. Or moved, or happy, or simple memories. Come here, leave you like the shining sentence, to share with everyone, this is the purpose of a word.
A word effect picture preview
Code implementation
The JS code is as follows:
// A word every day
$(function() {
var xhr = new XMLHttpRequest();
xhr.open('get'.'https://v1.hitokoto.cn');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var hitokoto = document.getElementById('hitokoto');
hitokoto.innerText = data.hitokoto;
}
}
xhr.send();
});
Copy the codeThe front-end HTML code is as follows:
<strong><p id="hitokoto">A word of the day...</p></strong>
Copy the code4. To summarize
Interested can study the above code logic and implementation method, or very interesting, if you want to use directly, then copy and paste into the page JS module.
More wonderful features please pay attention to my personal blog site: liujian.cool
Welcome to my personal public account: Program ape Liu Chuanfeng