Native js to achieve star twinkling effect
|
This article example shares the specific code of js to achieve the star twinkling effect for your reference. The specific content is as follows The principle of stars twinkling is actually very simple:
HTML code: <body style="background:#000"> <div id="stars_box"></div> </body> js:
var stars_box=document.getElementById('stars_box'); //Get the element with id star_boxvar Obj=function(){} //Create an objectObj.prototype.drawStar=function(){ //Add object prototype method drawStar
var odiv = document.createElement('div'); //Create div
odiv.style.width='7px';
odiv.style.height='7px';
odiv.style.position='relative'; //Set div to relative positioning odiv.style.left=Math.floor(document.body.clientWidth*Math.random()) 'px'; //div's left value cannot exceed the width of the screen odiv.style.top=Math.floor(document.body.clientHeight*Math.random()) 'px'; //div's left value cannot exceed the height of the screen odiv.style.overflow='hidden'; //Set div's overflow to hidden
stars_box.appendChild(odiv); //Add div to the stars_box element var ostar=document.createElement('img'); //Create the img element ostar.style.width='49px';
ostar.style.height='7px';
ostar.src='star.png';
ostar.style.position='absolute'; //Set img to absolute positioning ostar.style.top='0px';
odiv.appendChild(ostar); //Add img to div Play(ostar); //Method to implement animation flashing Play();
}
function Play(ele){
var i=Math.floor(Math.random()*7); //In order to make the stars twinkle at different times, set the random value var timer=setInterval(function(){ //Execute the anonymous method every 100ms if(i<7){
ele.style.left=-i*7 'px';
i ;
}else{
i=0;
}
},100);
}
//Use for loop to create 30 different objects for(var i=0;i<30;i ){
var obj = new Obj();
obj.drawStar();
}The static effect of twinkling stars:
Finally, attach the star img picture:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: mysql 5.7.11 winx64 initial password change
>>: Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5
Recommend
Sample code of uniapp vue and nvue carousel components
The vue part is as follows: <template> <...
Detailed explanation of how Node.js handles ES6 modules
Table of contents 1. Differences between the two ...
Example of how to enable Slow query in MySQL
Preface Slow query log is a very important functi...
TypeScript union types, intersection types and type guards
Table of contents 1. Union Type 2. Crossover Type...
Summary of knowledge points about null in MySQL database
In the MySQL database, null is a common situation...
JavaScript to show and hide images
JavaScript shows and hides pictures, for your ref...
Vue close browser logout implementation example
Table of contents 1. beforeunload event 2. Unload...
An example of using Lvs+Nginx cluster to build a high-concurrency architecture
Table of contents 1. Lvs Introduction 2. Lvs load...
Summary of common MySQL table design errors
Table of contents Mistake 1: Too many columns of ...
Implementing form submission without refreshing the page based on HTML
Using ajax to implement form submission without re...
How to add sudo permissions to a user in Linux environment
sudo configuration file The default configuration...
Several ways to center a box in Web development
1. Record several methods of centering the box: 1...
Example of using JS to determine whether an element is an array
Here are the types of data that can be verified l...
Detailed explanation of MySQL precompilation function
This article shares the MySQL precompilation func...
Example of pre-rendering method for Vue single page application
Table of contents Preface vue-cli 2.0 version vue...