给你的网页加上纷纷扬扬的雪景

LMS
1.8K+ 6

这个方法是通过jq插件来实现的,原理是其实是在页面上生成许多白色自由移动的点,同时也会感知鼠标的左右移动(上下移动不行)跟随鼠标左右移动而出现雪花往左右飘飞的感觉。

因为是jq实现的,所以非常简单,但是因为生成“雪花”时,需要给页面生成许多的带点的div,同时赋予css的样式定义,所以页面会变的很庞大,应该是会影响页面速度的。效果你可以看http://read.muxer.cn/,就在首页,其他页面没有加,如果速度慢,等jq加载完就能看到。

下面介绍代码:

先在页面中载入jq库,然后加入这个jq插件(其实就是一个js文件啦,不要被插件这个词吓到),插件直接到这里下载http://read.muxer.cn/images/snowstorm.js,点开后,保存为js文件放入你的空间里,然后再在需要雪景的页面引入这个代码。

在下雪的页面中除了上面的两句外,还有下面的这一段代码,用来修改雪花的浓度、形状、颜色等,是的,你还可以下红色或者蓝色等其他颜色的雪花,只要你高兴,不过好像不支持同时多种颜色的:

<script type="text/javascript">
sitePath = "";
snowStorm.animationInterval = 33;
snowStorm.flakeBottom = null;
snowStorm.flakesMax = 128;
snowStorm.flakesMaxActive = 64;
snowStorm.followMouse = true;
snowStorm.freezeOnBlur = true;
snowStorm.snowColor = "#fff"; //这里修改雪花的颜色,只要修改颜色代码就好
snowStorm.snowCharacter = "•"; //这里修改雪花的形状,比如逗号句号三角号等
snowStorm.snowStick = true;
snowStorm.targetElement = null;
snowStorm.useMeltEffect = true;
snowStorm.useTwinkleEffect = true;
snowStorm.usePositionFixed = true;
snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;
</script>

上面的三部加好就可以看到效果了。这个功能是在别的网站上扣下来的,不知道作者是谁哦。

THE END

评论 6

  1. 我以为我的广告已经够嚣张了……结果打开您的文章页才知道……我那太小儿科了 :cool:

  2. 是隨着鼠標偏移?我還是比較喜歡谷歌的那個效果,下雪,還可以擦雪挺好玩的

发表评论

Submit