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
The difference between MySQL user management and PostgreSQL user management
1. MySQL User Management [Example 1.1] Log in to ...
JavaScript to achieve digital clock effect
This article example shares the specific code of ...
How to package the project into docker through idea
Many friends have always wanted to know how to ru...
The "3I" Standards for Successful Print Advertising
For many domestic advertisers, the creation and ev...
Use of Docker image storage overlayfs
1. Overview The image in Docker is designed in la...
How to manage multiple projects on CentOS SVN server
One demand Generally speaking, a company has mult...
MYSQL Operator Summary
Table of contents 1. Arithmetic operators 2. Comp...
Pure CSS to achieve the text icon function by taking the first character of the string
How to implement text icons through CSS /*icon st...
Example of how to upload a Docker image to a private repository
The image can be easily pushed directly to the Do...
Correct use of MySQL partition tables
Overview of MySQL Partitioned Tables We often enc...
Specific use of MySQL window functions
Table of contents 1. What is a window function? 1...
Detailed explanation of the use of custom parameters in MySQL
MySQL variables include system variables and syst...
Analysis of the pros and cons of fixed, fluid, and flexible web page layouts
There is a question that has troubled web designe...
The solution of html2canvas that pictures cannot be captured normally
question First, let me talk about the problem I e...
Detailed installation tutorial of Mysql5.7.19 under Centos7
1. Download Download mysql-5.7.19-linux-glibc2.12...