search

Home  >  Article  >  Web Front-end  >  JavaScript to achieve snow effect [example code]_javascript skills

JavaScript to achieve snow effect [example code]_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:02:271476browse

Principle:

1. Dynamically create DIV with js, specify the CLASS class to set different background image styles to display different snowflake effects.

2. js gets the created DIV and changes its top attribute value. When the height of the drop is greater than the screen height, delete the mobile div

3. If it seems not perfect enough, please don’t spray

HTML code: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雪花飞舞</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/move.js"></script>
</head>
<body>
  <div class="snow_parent" id="js_sonw">
    
  </div>
</body>
</html>

CSS code

*{
  margin:0;
  padding:0;
  list-style: none;
  border: none;
}
body{
  width: 100%;
  height:600px;
  background:#000;
}
.snow_parent{
  position: relative;
  width: 100%;
  height:100%;
  overflow: hidden;
  margin: 0 auto;
}
.snow_parent div.parent{
  background-image: url(../img/snow.png);
  float: left;
  -webkit-transform: scale(.1);
  -moz-transform: scale(.1);
  -o-transform: scale(.1);
  -ms-transform: scale(.1);
  transform: scale(.1);
  position: absolute;
}
.snow_one{
  width: 180px;
  height: 180px;
  background-position:0 0;
  background-repeat: no-repeat;
  left:-70px;
  top: -95px;
}
.snow_two{
  width: 140px;
  height: 140px;
  background-position:-220px -18px;
  left:-30px;
  top: -75px;
}
.snow_three{
  width:150px;
  height: 150px;
  background-position:-400px -15px;
  left:-20px;
  top: -80px;
}
.snow_four{
  width: 160px;
  height: 160px;
  background-position:-10px -206px;  
}
.snow_four{
  left:-10px;
  top: -85px;
}

JS code:

/*
  creatBy jiucheng 2016-4-24
*/ 
window.onload=function(){
  init();
}
// 创建DIV
function creatDiv(){
  // 创建DIV并追加到父元素
  var snowDiv=document.createElement("div");
  document.getElementById("js_sonw").appendChild(snowDiv);
  // 让创建DIV的class为随机，显示不同的雪花
  var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];
  var index=Math.floor(Math.random()*whatName.length);
  snowDiv.className=whatName[index];
  // 获取该DIV的left属性值(随机的)并赋值给创建的DIV
  var whatLeft=getLeft()+'px';
  snowDiv.style.left=whatLeft;
  return snowDiv;
}
// 获取随机left属性值
function getLeft(){
  // 获取该DIV的最大left属性值即父元素的宽度
  var eleParent=document.getElementById("js_sonw");
  // 获取父元素的所有style样式
  var style=window.getComputedStyle(eleParent);
  // CSS中的left是负数这里得减去下
  var maxWidth=parseInt(style.width)+70;
  // 让创建的DIV的left为随机值
  var randomLeft=Math.floor(Math.random()*maxWidth);
  return randomLeft;
}
// 让其向下移动
function moveDown(){
  // 获取移动对象
  var moveElem=creatDiv();
  // 获取移动对象的所有style属性值
  var eleStyle=window.getComputedStyle(moveElem);
  // 获取它的top属性值
  var eleTop=parseInt(eleStyle.top);
  // 设置定时器动态改变移动对象的top属性值
  var t=setInterval(function(){
    eleTop++;
    // 把新的top值付给移动对象
    moveElem.style.top=eleTop+"px";
    // 当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除
    if(eleTop>=window.innerHeight){    
      clearInterval(t);
      document.getElementById("js_sonw").removeChild(moveElem);
    }    
  },10);//下落速度没10毫秒下落1px
}
function init(){
  // 动态获取并设置body的高度
  document.body.style.height=window.innerHeight+"px";
  // 每500毫秒创建一个移动对象并执行移动函数
  var t=setInterval(function(){
    moveDown();
  },100);
}

The above javascript implementation of snow effect [example code] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript and jquery implement user login verification respectively_javascript skillsNext article：JavaScript and jquery implement user login verification respectively_javascript skills

Related articles

See more