有时为了给网站访客营造一种特殊节日气氛,添加下雪飘雪花的效果是一种不错的选择。为此我在网上找了不少代码并试验,最终选取两种自己比较满意的分享给大家。
如果你使用的如 chrome 和火狐等浏览器支持开发者工具,可以复制粘贴在控制台 console 里面回车即可查看效果了。(记得去掉 script 标签)
雪花代码的使用方法:
①、你可以直接复制下面的代码到网页的 head 或 foot 中,但为了网页打开速度还是放在底部粘贴到</body>
前就好;
②、如果你闲代码过长可以去掉下面代码前后的 script 标签另存为 websnow.js 文件,再在网页头部或尾部引用即可。例如:
- <script type='text/javascript' src='http://www.jianlove.com/websnow.js'></script>
如果不起作用,请确认你的网站原本是否已引用 JQurey 库,还没有就需要在添加的代码前引用 JQurey。
代码展示:
- <script type="text/javascript">
- (function($){
- $.fn.snow = function(options){
- var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
- documentHeight = $(document).height(),
- documentWidth = $(document).width(),
- defaults = {
- minSize : 10,
- maxSize : 20,
- newOn : 1000,
- flakeColor : "#AFDAEF" /* 自定义雪花颜色,默认是浅蓝色 */
- },
- options = $.extend({}, defaults, options);
- var interval= setInterval( function(){
- var startPositionLeft = Math.random() * documentWidth - 100,
- startOpacity = 0.5 + Math.random(),
- sizeFlake = options.minSize + Math.random() * options.maxSize,
- endPositionTop = documentHeight - 200,
- endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
- durationFall = documentHeight * 10 + Math.random() * 5000;
- $flake.clone().appendTo('body').css({
- left: startPositionLeft,
- opacity: startOpacity,
- 'font-size': sizeFlake,
- color: options.flakeColor
- }).animate({
- top: endPositionTop,
- left: endPositionLeft,
- opacity: 0.2
- },durationFall,'linear',function(){
- $(this).remove()
- });
- }, options.newOn);
- };
- })(jQuery);
- $(function(){
- $.fn.snow({
- minSize: 5, /* 雪花最小尺寸 */
- maxSize: 50,/* 雪花最大尺寸 */
- newOn: 300 /* 雪花密集程度,数字越小越密集 */
- });
- });
- </script>
还有一种代码因篇幅稍长,准备另起一篇文章并附代码说明;这篇文章的雪花效果是棱角分明的样式,默认颜色适合浅色系背景的网站;而下篇文章的雪花效果是类似小棉花团的样式,默认颜色适合深色系背景的网站。
另一种雪花效果代码查看:冬季圣诞节给网站添加飘雪花效果的代码
转载请注明链接地址:荐爱小站 » 给网站添加飘下雪花效果的代码