`
jsctrlc
  • 浏览: 9792 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

js雪花特效_跟随页面滚动的下雪特效

 
阅读更多

这星期宁波有些地方已经开始下雪了,气温一下子降了很多,又快过年了。冬天最喜欢的就是下雪了,我想没有几个人不喜欢的,所以就从网络上到处收集有关雪花的特效,今天就来分享第一个JS雪花特效。这是个从淘宝网上拿下来的下雪特效,雪花从页面的顶部一直往下飘落,当你向下滚动页面时雪花又从当前页面的顶部开始下,而不是一直是从页面顶部落下来的。

js雪花特效代码

 (function(){
        function k(a,b,c){
            if(a.addEventListener)
                a.addEventListener(b,c,false);
            else {
                a.attachEvent&&a.attachEvent("on"+b,c)
            }
        }
        function g(a){
            if(typeof window.onload!="function"){
                window.onload=a;
            }else{
                var b=window.onload;
                window.onload=function(){
                    b();
                    a()
                }
            }
        }
        function h(){
            var a={};
            for(type in{Top:"",Left:""}){
                var b=type=="Top"?"Y":"X";
                if(typeof window["page"+b+"Offset"]!="undefined")
                    a[type.toLowerCase()]=window["page"+b+"Offset"];
                else{
                    b=document.documentElement.clientHeight?document.documentElement:document.body;
                    a[type.toLowerCase()]=b["scroll"+type]
                }
            }
            return a
        }
        function l(){
            var a=document.body,b;
            if(window.innerHeight)
                b=window.innerHeight;
            else if(a.parentElement.clientHeight)
                b=a.parentElement.clientHeight;
            else if(a&&a.clientHeight)
                b=a.clientHeight;
            return b
        }
        function i(a){
            this.parent=document.body;
            this.createEl(this.parent,a);
            this.size=Math.random()*5+3;
            this.el.style.width=Math.round(this.size)+"px";
            this.el.style.height=Math.round(this.size)+"px";
            this.maxLeft=document.body.offsetWidth-this.size;
            this.maxTop=document.body.offsetHeight- this.size;
            this.left=Math.random()*this.maxLeft;
            this.top=h().top+1;
            this.angle=1.4+0.2*Math.random();
            this.minAngle=1.4;
            this.maxAngle=1.6;
            this.angleDelta=0.01*Math.random();
            this.speed=2+Math.random()
        }
        var j=false;
        g(function(){
            j=true
        });
        var f=true;
        window.createSnow=function(a,b){
            if(j){
                var c=[],m=setInterval(function(){
                    f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
                    !f&&!c.length&&clearInterval(m);
                    for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)
                        if(c[d])
                        if(c[d].top<e||c[d].top+c[d].size+1>e+n){
                            c[d].remove();
                            c[d]=null;
                            c.splice(d,1)
                        }else{
                            c[d].move();
                            c[d].draw()
                        }
                },40);
                k(window,"scroll",function(){
                    for(var e=c.length-1;e>=0;e--)
                        c[e].draw()
                })
            }else 
                g(function(){
                    createSnow(a,b)
                })
        };
        window.removeSnow=function(){
            f=false
        };
        i.prototype={
            createEl:function(a,b){
                        
                        this.el=document.createElement("img");
                        this.el.setAttribute("src","now.gif");
                        //this.el.setAttribute("class","fixpng");
                        this.el.style.position="absolute";
                        this.el.style.display="block";
                        this.el.style.zIndex="99";
                        //document.getElementById('snow').appendChild(this.el);
                        this.parent.appendChild(this.el)
                     },
            move:function(){
                     if(this.angle< this.minAngle||this.angle>this.maxAngle)
                         this.angleDelta=-this.angleDelta;
                    this.angle+=this.angleDelta;
                    this.left+=this.speed*Math.cos(this.angle*Math.PI);
                    this.top-=this.speed*Math.sin(this.angle*Math.PI);
                    if(this.left<0)
                        this.left=this.maxLeft;
                    else if(this.left>this.maxLeft)
                        this.left=0
                 },
            draw:function(){
                     this.el.style.top=Math.round(this.top)+"px";
                    this.el.style.left=Math.round(this.left)+"px"
                 },
            remove:function(){
                //document.getElementById('snow').removeChild(this.el);
                //document.getElementById('snow').this.el=null;
                this.parent.removeChild(this.el);
                this.parent=this.el=null
            }
        }
    })();
    /**
     * This function takes 2 arguments
     * First is the path to the directory with snowflake images
     * Second is the maximum number of snowflakes, please do not
     * set this number above 60 as it will impact the performance
     */
    createSnow('', 60);

直接复制上面的js代码就可以查看到效果,如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/

分享到:
评论

相关推荐

    JS网页下雪特效

    接着,我们需要在`&lt;script&gt;`标签中引入或者创建一个名为`snowfall.js`的JS文件,这个文件将包含实现下雪特效的所有逻辑。以下是一个简单的例子: ```javascript // 获取canvas元素 const canvas = document....

    CSS雪花特效

    总的来说,CSS雪花特效是一个结合了CSS动画、伪元素和可能的JavaScript交互的复杂但有趣的项目。它展示了前端开发中创造性的一面,同时也需要对CSS的掌握有较深的理解。通过不断调整和优化,你可以创造出一个既美观...

    JS实现雪花下落特效-圣诞节特效

    JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS...

    js雪花特效

    在本案例中,"js雪花特效"是一个利用JavaScript实现的视觉效果,尤其适用于圣诞节、平安夜或冬季主题的网站背景,为用户带来独特的交互体验。通过这种特效,网站的访问者可以看到屏幕上飘落的雪花,营造出一种冬日...

    下雪_基于C#的桌面下雪特效案例_

    我们需要创建一个窗体(Form),作为下雪特效的显示区域,并添加一个Paint事件处理程序来绘制雪花。 在Paint事件处理程序中,我们可以利用Graphics类来绘制雪花。Graphics类提供了多种绘制图形的方法,如DrawLine、...

    雪花动态特效html5

    6. **js**:JavaScript代码通常放在这里,负责实现动态雪花飘落的逻辑,包括雪花的生成、运动轨迹、碰撞检测等。 学习这个特效,你需要理解HTML5的结构标签,CSS3的选择器、过渡和动画属性,以及JavaScript的基本...

    jQuery+three.js雪花飘落动画效果

    同时,three.js的动画系统可以控制这些雪花在指定时间内改变位置和旋转角度,以营造出下雪的感觉。 为了实现这个3D效果,开发者需要在HTML中创建一个canvas元素,作为three.js的画布。在index.html中,可能包含了...

    html5 canvas漫天雪花动画特效_漫天飞雪动画特效

    "漫天雪花动画特效"是Canvas应用的一个经典案例,它利用了Canvas API来模拟真实世界中雪花飘落的效果,为网页增添了一份冬季的浪漫气息。 首先,我们来理解HTML5 Canvas的基本概念。Canvas是一个二维绘图上下文,...

    下雪js特效源码,网页下雪源码,圣诞节下雪代码,下雪代码,下雪特效源码

    "下雪js特效源码"就是一个典型的例子,它允许开发者在网页上创建逼真的下雪动画,为用户营造出一种浪漫且节日氛围浓厚的环境,比如圣诞节。这种特效源码通常基于JavaScript语言,这是一种广泛应用于前端开发的编程...

    下雪了 javascript实现雪花飘舞_.docx

    这里只有一个`&lt;div&gt;`元素,作为雪花飘舞的容器,它的类名是`snow_parent`,并且设置了`id`为`js_snow`,方便通过JavaScript进行操作。这个容器具有相对定位,以便于子元素相对于它进行绝对定位。 CSS部分定义了雪花...

    js初学者特效教程——网页雪花特效demo

    本教程将带你走进JavaScript初学者特效的殿堂,以“网页雪花特效”为例,教你如何利用JS、CSS3和HTML5创建一个可自定义的动态雪花效果。在这个过程中,你不仅能学到基本的JavaScript编程技巧,还能了解到CSS3动画和...

    ArcGIS JS API+Three.js实现下雪特效.zip

    在本项目中,开发者利用了ArcGIS JavaScript API和Three.js库来实现一个逼真的下雪特效。这个技术结合了地理信息系统(GIS)与WebGL图形渲染技术,为地图应用增添了生动的视觉效果。以下是关于这些知识点的详细说明...

    flake_331_jsjq雪花_

    在本项目中,"flake_331_jsjq雪花_"是一个关于使用JavaScript和jQuery实现雪花纷飞特效的实例。这个特效常用于冬季主题的网页设计,为用户带来一种浪漫和节日的氛围。以下是对这个项目的详细解读: 1. **JavaScript...

    js-canvas雪花特效插件及demo

    在这个"js-canvas雪花特效插件及demo"中,我们可以深入探讨Canvas API的运用以及雪花特效的实现原理。 首先,让我们了解一下Canvas API的基础知识。Canvas提供了一系列的绘图方法,如`fillRect()`, `strokeRect()`,...

    xuehua.rar_java雪花_java雪花效果_xuehua_雪花

    在IT行业中,编程特效的实现往往能够提升用户体验,其中“雪花效果”就是一个常见的视觉美化元素。本主题聚焦于使用Java语言实现的“雪花效果”,这是一个动态的图形渲染技术,能够模拟真实的雪花飘落场景,为用户...

    HTML5 Canvas下雪雪花动画特效.zip

    在这个"HTML5 Canvas下雪雪花动画特效.zip"压缩包中,包含了六种不同的雪花动画实现,这些都是通过JavaScript利用Canvas API来创建的。下面我们将深入探讨HTML5 Canvas和这些特效的相关知识点。 1. **HTML5 Canvas...

    unity包 雪花特效

    在Unity中,特效是提升游戏或应用视觉表现力的重要手段,而“雪花特效”则是其中一种常见的自然环境模拟。 这款名为"Realistic Snow VFX 2.1.unitypackage"的资源包,专门用于在Unity项目中实现逼真的雪花效果。它...

    网页雪花js特效

    雪花js特效和用于各种页面 ,我也是下载的自己学习学习

Global site tag (gtag.js) - Google Analytics