网页开发背景出现下雪特效

2020-07-01 17:53:59 浏览数 (1)

2015-05-22 17:11:09

今天我来给大家介绍一种网页特效,这种网页特效是是背景出现下雪的效果,非常的绚丽。如果说下雪不太适合自己的网页,需要飘落一些花瓣或心之类的,那么同样可以使用这个特效,只填一张图片即可实现,废话就不多说了,直接了看代码吧。

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页下雪特效--落帆亭</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script src="js/jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function(){
    $.fn.snow({
        //Container:'.aixin',//这里是你想在哪个元素处出现雪花,这里可以是class也可以是id
                  minSize: 5, //雪花的最小尺寸
                  maxSize: 50, //雪花的最大尺寸
                  newOn: 300 //雪花出现的频率 这个数值越小雪花越多
                  //content:'<img src="images/xin.png" style="width:100%">',//这里是你想用的图片,如果不写这行代码,则默认为雪花
                 //  documentHeight :$(".aixin").height(),
                 //  documentWidth :$(".aixin").width(),
                 //  flakeColor : "#ff2727"
    });
});
</script>
</head>
<body style="background:#3B3B3B; color:#ccc;">

<div style="text-align:center;margin: 0;padding:0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

这就是简单的在html代码里调用下雪的这个特效,当然这个效果并不是这么简单,还需要有一点点的js控制,这里我将他封装在了一个js文件里,只需要在使用时引入即可。本站提供下载链接和演示效果,有兴趣的朋友可以看一下。

在线预览链接:预览,下载的话从预览里面直接从socure目录里下载吧

0 人点赞