javascript实现下雪效果【实例代码】
原理 :
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实现下雪效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
javascript实现下雪效果【实例代码】
原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
javascript按钮禁用和启用的效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮启用和禁用</title> <script type="text/javascript"> function btn1() { document.getElementById("btn1"
-
JavaScript基于SVG的图片切换效果实例代码
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层
-
JavaScript+CSS相册特效实例代码
嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT
-
jQuery模拟实现天猫购物车动画效果实例代码
一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:
-
jQuery实现公告新闻自动滚屏效果实例代码
本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti
-
原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
-
yii框架redis结合php实现秒杀效果(实例代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <?php namespace backend\controllers; use Yii; use yii\web\Controller; /** * */ class GoodsController extends Controller { public $enableCsrfValidation=false; public function actionInfo() { $data=yii::$app->db->createCom
-
JavaScript实现二分查找实例代码
二分查找的前提为:数组.有序.逻辑为:优先和数组的中间元素比较,如果等于中间元素,则直接返回.如果不等于则取半继续查找. /** * 二分查找,递归实现. * @param target * @param arr * @param start * @param end * @returns {*} */ function binarySearch(target,arr,start,end) { var start = start || 0; var end = end || arr.length