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
Docker file storage path, modify port mapping operation mode
How to get the container startup command The cont...
Mobile browser Viewport parameters (web front-end design)
Mobile browsers place web pages in a virtual "...
Use elasticsearch to delete index data regularly
1. Sometimes we use ES Due to limited resources o...
Nginx monitoring issues under Linux
nginx installation Ensure that the virtual machin...
Solution to the problem that Java cannot connect to MySQL 8.0
This article shares a collection of Java problems...
Two methods of restoring MySQL data
1. Introduction Some time ago, there were a serie...
Practical method of deleting files from Linux command line
rm Command The rm command is a command that most ...
How to use docker to deploy front-end applications
Docker is becoming more and more popular. It can ...
Windows 10 1903 error 0xc0000135 solution [recommended]
Windows 10 1903 is the latest version of the Wind...
JavaScript explains the encapsulation and use of slow-motion animation
Implementing process analysis (1) How to call rep...
How to use commands in Mysql to achieve hierarchical search help detailed explanation
Preface This article mainly introduces the releva...
How to use anti-shake and throttling in Vue
Table of contents Preface concept Stabilization d...
Application and implementation of data cache mechanism for small programs
Mini Program Data Cache Related Knowledge Data ca...
Complete code for implementing the vue backtop component
Effect: Code: <template> <div class=&quo...
Vue sample code for online preview of office files
I'm working on electronic archives recently, ...