1. [代码][HTML]代码     
<a  href="javascript:void(function(){var d = document,a = 'setAttribute',s = d.createElement('script');s[a]('type','text/javascript');s[a]('src','http://www.veryued.org/wp-content/themes/google_snow.js');d.head.appendChild(s);})();">下雪</a>
2. [代码][JavaScript]代码     
(function(){
    if(window.zythumsgooglesnowloaded) return false;
    function oneCircle(ct,cw,ch,pw,_pw,ph,_ph){
        var rw = (_pw+(pw-_pw)*Math.random())*cw,
            rh = (_ph+(ph-_ph)*Math.random())*ch,
            ra = 0.5*Math.random(),
            rr = 50+cw/10*Math.random();
        ct.globalCompositeOperation = 'source-over';
        var g = ct.createRadialGradient(rw, rh, 0, rw, rh, rr);
        g.addColorStop(0,'rgba(240,240,240,'+ra+')');
        g.addColorStop(1,'rgba(240,240,240,0)');
        ct.fillStyle = g;
        ct.fillRect(0, 0, cw, ch);
        ct.fill();
    }
    function draw(ct){
        var pointerArr = [];
        this.dPointer = function(x,y){
            pointerArr.push({x:x,y:y});
            _draw(0);
        }
        this.dLine = function(x,y){
            pointerArr.push({x:x,y:y});
            _draw(0);
        }
        this.stop = function(){
            pointerArr.push(false);
        }
        var _draw = function(c){
            ct.globalCompositeOperation = 'destination-out';
            ct.lineWidth = 60;
            ct.lineCap = ct.lineJoin = "round";
            ct.beginPath();
            ct.moveTo(pointerArr[c].x,pointerArr[c].y);
            while(pointerArr[++c]){
                ct.lineTo(pointerArr[c].x,pointerArr[c].y);
            }
            ct.stroke();
            ct.closePath();
            if(pointerArr[c] == undefined) return false;
            _draw(++c);
        }
    }
    var d = document.createElement('div'),
        ca = document.createElement('canvas'),
        w = 0;h = 0;
    document.body.appendChild(d);
    d.appendChild(ca);
    d.style.cssText += ';position:fixed;top:0;left:0;bottom:0;right:0;z-index:100001;';
    w = d.offsetWidth;h = d.offsetHeight;
    ca.setAttribute('width',w);
    ca.setAttribute('height',h);
    ca.onselectstart = function(){return false};
    ca.style.cursor = 'pointer';
    ct = ca.getContext('2d');
    //forgs
    forgFinished = false;
    setTimeout(function(){
        (function(){
            var loopContent = 100,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.05,-0.1);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
    },2000)
    setTimeout(function(){
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,1.1,0.95,1,0);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,0.05,-0.1,1,0);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,1,0,1.1,0.95);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
    },4000);
    setTimeout(function(){
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.3,0.05);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,0.95,0.7,1,0);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,0.3,0.05,1,0);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.95,0.7);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
    },6000);
    setTimeout(function(){
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,1,0);
                if(loopContent--)   setTimeout(loop,20);
            }
            loop();
        })();
        forgFinished = true;
        //ct.save();
    },7000);
    //draw;
    var dr = new draw(ct);
    var moveFlag = false;
    document.addEventListener('mousedown',function(e){
        if(forgFinished){
            dr.dPointer(e.clientX,e.clientY);
            moveFlag = true;
        }
    },false);
    document.addEventListener('mousemove',function(e){
        if(moveFlag) dr.dLine(e.clientX,e.clientY)
    },false);http://www.huiyi8.com/clxgt/​
    document.addEventListener('mouseup',function(e){
        dr.stop(e.clientX,e.clientY)
        moveFlag = false;
    },false);窗帘效果图
    document.addEventListener('touchstart',function(e){
        dr.dPointer(e.clientX,e.clientY);
        moveFlag = true;
    },false);
    document.addEventListener('touchmove',function(e){
        if(moveFlag) dr.dLine(e.clientX,e.clientY)
    },false);
    document.addEventListener('touchend',function(e){
        dr.stop(e.clientX,e.clientY)
        moveFlag = false;
    },false);
    //snow
    var sd = document.createElement('div');
    document.body.appendChild(sd);
    sd.style.cssText += ';position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;overflow:hidden;';
    var ss = [];
    var limit = 0;
    var stime = setInterval(function(){
        if(limit++ == 5){
            limit = 0;
            var ns = document.createElement('div');
            ns.innerHTML = '\u2745';
            ns.style.cssText += ';position:absolute;top:-2px;color:#333;opacity:0.8;';
            //-webkit-transition:top 0.05 linear;-webkit-transition:left 0.05 linear;-moz-transition:top 0.05 linear;-moz-transition:left 0.05 linear;-o-transition:top 0.05 linear;-o-transition:left 0.05 linear;
            ns.ztop = -2;
            ns._ztop = 2+Math.random()*5;
            ns.zleft = Math.random()*sd.offsetWidth;
            ns._zleft = Math.random()<0.5? Math.random() : Math.random()*(-1);
            ns.style.fontSize = 16*Math.random()+'px';
            ns.style.opacity = 0.5+Math.random()*0.5;
            ns.style.left = ns.zleft+'px';
            sd.appendChild(ns);
            ss.push(ns);            
        }
        for(var i=0;i<ss.length;i++){
            ss[i].ztop += ss[i]._ztop;
            ss[i].zleft += ss[i]._zleft;                
            if(ss[i].ztop > sd.offsetHeight){
                sd.removeChild(ss[i]);
                ss.splice(i,1);
            }else{
                ss[i].style.top = ss[i].ztop+'px';
                ss[i].style.left = ss[i].zleft+'px';
            }
        }
    },20);
    //close
    setTimeout(function(){
        var close = document.createElement('div');
        close.innerHTML = '{Stop snowing.}';
        close.style.cssText += ';cursor:pointer;text-shadow:0 0 5px #fff;color#aaa;font-size:16px;position:fixed;top:20px;right:20px;font-family:arial,sans-erif;z-index:100002';
        document.body.appendChild(close);
        close.addEventListener('click',function(){
            clearInterval(stime);
            document.body.removeChild(d);
            document.body.removeChild(sd);
            document.body.removeChild(close);
            window.zythumsgooglesnowloaded = undefined;
        },false);
    },5000);
    window.zythumsgooglesnowloaded = true;
})();

HTML页面下雪特效的更多相关文章

  1. JQ_下雪特效

    这是一个jQuery下雪特效.特效的代码如下: <style>body{background:black;color:white}</style><script>/ ...

  2. ViewPager页面切换特效

    ViewPager页面切换特效如下效果 看效果: 效果1: 效果2: 下面就开始讲解如何实现这两个页面翻转效果 1.首先你得会ViewPager控件的使用(废话!现在还有人不会使用吗???!!) 2. ...

  3. js页面载入特效如何实现

    js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...

  4. 给你的WordPress站点添加下雪特效

    今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...

  5. 58种jQuery模拟CSS3过渡页面切换特效

    演示网址 http://www.htmleaf.com/Demo/201503251573.html 点击下载

  6. 实现pushViewController:animated:的不同页面转换特效

    1. 首先要明确的是,不使用pushViewController的默认动画,所以在调用这个函数时,要将animated设置为NO.2. 使用普通的来CATransition实现转换效果,代码如下:CA ...

  7. 纯css实现下雪特效

    //------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...

  8. 利用CSS3实现页面淡入动画特效

    利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...

  9. js实现下雪雪花特效

    两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...

随机推荐

  1. [Violet 4] 毕业旅行

    2718: [Violet 4]毕业旅行 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 672  Solved: 389[Submit][Status ...

  2. 想用idea的update classes and resources找不到了,热部署无法使用

    发现为了方便调试页面,想用idea的update classes and resources找不到了,发现需要把deployment选择exploded 的那个war包,才能在service--> ...

  3. 【Navicat preminm】64位的Navicat preminm注册

    百度云盘 技术-->Navicat preminm+破解

  4. MachineLearningInAction

    2017-01-07 20:14:45 前面两周主要都是在复习然后考试,每天其实过得也挺苦逼的.基本上项目和学习上的是都没有接触了:复习了随机过程和数字信号处理和信号检测和估值:主要都是复习一些理论上 ...

  5. Java常见面试题汇总(一)

    1)什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个能够运行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机运行的字节 ...

  6. C++11中的原子操作(atomic operation)(转)

    所谓的原子操作,取的就是“原子是最小的.不可分割的最小个体”的意义,它表示在多个线程访问同一个全局资源的时候,能够确保所有其他的线程都不在同一时间内访问相同的资源.也就是他确保了在同一时刻只有唯一的线 ...

  7. Windows 系统 vs2012 MinGW 编译ffmpeg 静态库

    Windows系统下 vs2012编译ffmpeg 动态库 前面已经有文章讲述,本文将讲述如果编译生成ffmpeg静态库以方便 在vs2012下调用. 准备工作:安装MinGW环境,修改ffmpeg配 ...

  8. tree related problems (update continuously)

    leetcode Binary Tree Level Order Traversal 这道题是要进行二叉树的层次遍历.对于层次遍历,最简单直观的办法就是进行BFS.于是我们仅仅须要维护一个队列就能够了 ...

  9. Apcahe Shiro学习笔记(一):简介及运行官方Demo

    一.Apache Shrio: apache shiro 是一个功能强大和易于使用的Java安全框架,为开发人员提供一个直观而全面的的解决方案的认证,授权,加密,会话管理. 支持认证跨一个或多个数据源 ...

  10. ActiveMQ 消息持久化到Mysql数据库

    [root@txylucky local]# tar -zxvf apache-activemq-5.15.8-bin.tar.gz[root@txylucky local]# mv apache-a ...