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

LMS
折腾
1.4K+ 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