这个方法是通过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
我以为我的广告已经够嚣张了……结果打开您的文章页才知道……我那太小儿科了 …
就是大了点而已,哈哈哈
广告很多啊,,
这是必须的。
是隨着鼠標偏移?我還是比較喜歡谷歌的那個效果,下雪,還可以擦雪挺好玩的
谷歌是谁啊,人家随便玩的