雪效果的Javascript

书面克劳迪奥Matarrelli类别解决方案 2009年11月27日| 2条评论

在最初几年的工作时，我开始在网络上并没有很多技术设备，用以打动观众。
DHTML效果是唯一的元素，以丰富的网页。

在这种情况下，一个典型的由上千个网站用的是在冬季雪。

这是对几十KB的脚本，效果肯定愉快，但往往由于浏览器崩溃的层次不断重叠，为每个新生成的雪花之一。

不过我只是浏览网页发现这些老的脚本，或一些老式的复苏总是非常沉重。

为什么不是为轻，不拖慢网页载入不饱和的浏览器发送的资源，正如你不能惹恼读者？

这就是我努力去做。

该脚本的测试（IE浏览器，火狐，铬，Opera等主流浏览器的更新版本。）但我不保证向后兼容旧版浏览器3-4年在这种情况下它不工作，如果这个问题是不是脚本，兼容性但是，没有更新的时间做... :-)

如果你要使用脚本或写入以及那些谁需要它。 唯一的礼貌，触动的部分，表明出处。

该选项是有案可稽的，只是编辑在脚本顶部的变量。

  • 数片;
  • 它们移动速度;
  • 最大规模的片;
  • 最小尺寸的薄片;
  • 性格一般片，或者形象;
  • 颜色片;
  • 不透明度; 
  / *脚本生成一个网页在网上降雪 
      创建克劳迪奥Matarrelli 
      claudio.matarrelli @ gmail.com 
      （C）2009年www.matarrelli.com 

      自由使用，只要你离开可见版权 
  * /

 / /配置变量
 100 ; numerofiocchi 风险值 = 100;
 300 ; //millisecondi VaR的时间= 300 / /毫秒
 ; //px dimensionemassimafiocco = 40 / /像素
 ; //px dimensioneminimafiocco = 8 / /像素
 ; /*consigliati * o punto. caratterefiocco =“*”，/ * *或点建议。  或者可以打蜡 
                                图片1 *标签<img src="http://indirizzo/immagine.jpg"> /
 ; colorefiocco =“＃F00”;
 ;透明度= 0.5;
 / /初始化变量
 0 ; 风险值指数= 0;

 / /函数产生一个主食，即在一个div *绝对定位
 idfiocco ) {主食功能 （idfiocco）（
     '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: 文件。写（“<分区编号='雪'+ idfiocco +'”的风格=“过滤器：α（不透明='+透明度* 100 +');-万盎司，不透明度：'+透明度+'，- KHTML的不透明：'+透明度+'，不透明度：  

  trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; '+透明+';颜色：'+ colorefiocco +';字体大小：'+ 数学。 楼 （Math.随机（）*（dimensionemassimafiocco - dimensioneminimafiocco + 1）+ dimensioneminimafiocco）+' 像素;位置：固定;  

  Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) 顶部：'+ 数学。 楼 （Math.随机（）*屏幕。高度* 0.7）+' 过氧化物酶;左：'+ 数学。 楼 （Math.随机（）*屏幕。宽度- 40）+' 像素“>” caratterefiocco + +“</ 分区>”）
 ）

 / /生成一个编号，以片状numerofiocchi被设置
 generaFiocchi 函数 （）（
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { 为 （指数 = 0;指数<numerofiocchi;指数+ +）（
        主食（指数）
     ）
 ）
 / /移动片随机每次你打发时间设定
 spostaFiocchi 函数 （）（
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { 为 （指数 = 0;指数<numerofiocchi;指数+ +）（
     'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; 文件 。getElementById（'雪'+ 指数）。 作风。顶部数学。 楼 （Math.随机（）*屏幕。高度* 0.7）+'像素';
     'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; 文件 。getElementById（'雪'+ 指数）。 作风。左=数学。 楼 （Math.随机（）*屏幕。宽度- 40）+'像素';
     ）


     , tempo ) ;的setTimeout（“spostaFiocchi（）'，时间）;

 ）

 / /启动片代
 generaFiocchi（）;

 / /执行这一转变持续
 spostaFiocchi（）;

要安装，只需上传您的服务器上的脚本，包括页面的前<底部/身体> 

  <script src="http://indirizzo/neve.js" language="javascript"> </脚本>

2回应“的Javascript雪效应”

  1. 弗拉维奥 说：
    27/11/2009于20:05

    你终于开始规划呢？

  2. 克劳迪奥Matarrelli 写道：
    27/11/2009于20时07分

    其实我做了多年，当我有正确的刺激.. 像在家里发烧下午 :-)

发表评论