下面小编就为大家带来一篇 javascript 实现下雪效果【实例代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
原理 :
1、js 动态创建 DIV, 指定 CLASS 类设置不同的背景图样式显示不同的雪花效果。
2、js 获取创建的 DIV 并改变其 top 属性值,当下落的高度大于屏幕高后删除该移动 div
3、好像不够完善勿喷
html 代码:
- <!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 代码
- *{
- 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 代码:
- /*
- 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);
- }
以上这篇 javascript 实现下雪效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0223/266026.html