纯原生js下雪

PROMULGATOR

DYG

河北省

← UI设计师不能丢掉css3前端动画代码

→ jQuery tab切换效果（改进）

相关代码

纯原生js下雪

雪花效果，使用画布

简单实用的下雪特效

js下雪效果（原创）

jquery实现全屏雪花飘落

模仿雪花飞舞

Html

Css

Js

* {
	margin:0;
	height:0;
}
body {
	background-color:#222222;
}

function sujixy(max, min) {
    return parseInt(Math.random() * (max - min + 1) + min);
}

function Xq() {
    //随机定位
    this.left = sujixy(document.body.clientWidth - 20, 0); 
    this.top = sujixy(10, 0);
    this.dx = sujixy(20, 10);
}
Xq.prototype = {
    //产生一个随机位置，随机颜色随机大小的小球。
    xq: function() {
        this.ba = document.createElement("img");
        this.ba.src = "http://www.jq22.com/demo/canvasSnow201701172021/images/white-snowflake.png"
        this.ba.style.width = this.dx + "px";
        this.ba.style.height = this.dx + "px";
        this.ba.style.position = "absolute";
        this.ba.style.left = this.left + "px";
        this.ba.style.top = this.top + "px";
        document.body.appendChild(this.ba);
    },
    //产生一个小球移动碰撞的方法。
    xqd: function() {
        var l = 0;
        var t = 1;
        var left1 = this.left;
        var top1 = this.top;
        var _this = this;
        var ID = setInterval(function() {
            left1 += l;
            top1 += t;
            _this.ba.style.left = left1 + "px";
            _this.ba.style.top = top1 + "px";
            if (top1 >= innerHeight - _this.dx) {
                document.body.removeChild(_this.ba);
                clearInterval(ID);
            }
        }, 10);
    }
}
set = setInterval(fun, 300);

function fun() {
    var a = new Xq();
    a.xq();
    a.xqd();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯原生js下雪



代码描述：纯原生写的

4

最新

发表评论全部评论

暂时没有评论！

少曳-YIY0

2017/10/24 14:49:12

这滚动条怎么回事

曾志强0

2017/10/30 11:43:18

滚动条被冻抽了

军3

2017/11/1 16:43:46

function Xq() { //随机定位 this.left = sujixy(document.body.clientWidth - 20, 0); this.top = sujixy(10, 0); this.dx = sujixy(20, 10); }
这个改成这样就行了，不会出现滚轴了

木木0

2017/11/10 15:29:58

function Xq() { this.left = sujixy(document.body.clientWidth - 20, 0); this.top = sujixy(10, 0); this.dx = sujixy(20, 10); }
不好意思了，借用一下，，，

回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯原生js下雪-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号