jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

前端技术 2023/09/01 JavaScript

这是一款基于jquery实现的漫天雪花飞舞的圣诞祝福雪花效果代码，雪花的大小可以进行切换，用户还可以更改背景图片，是一款非常实用的幻灯片特效源码。

漫天雪花飞舞的jquery圣诞祝福雪花效果，集中不同的效果可以点击选择，请欣赏。

效果演示 源码下载（浏览器中如果不能正常运行，可以尝试切换浏览模式或者选择直接下载）

 

 为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码如下

<!DOCTYPE html>
<html>
<head>
 <script type=\"text/javascript\" src=\"images/jquery-latest.min.js\"></script>
 <script src=\'images/snowfall.jquery.js\'></script>
 <link rel=\"stylesheet\" href=\"images/styles.css\"></link>
</head>
<body class=\"darkBg\">
 <input type=\"button\" id=\"clear\" value=\"Click to clear\"/>
 <input type=\"button\" id=\"round\" value=\"Rounded\"/>
 <input type=\"button\" id=\"shadows\" value=\"Shadows\"/>
 <input type=\"button\" id=\"roundshadows\" value=\"Rounded Shadows\"/>
 <input type=\"button\" id=\"deviceorientation\" value=\"Deviceorientation\"/>
 <div class=\"collectonme\">
 <p>Collect on meeeeee!!!</p>
 </div>
 <div class=\"collectonme\">
 <p>Collect on meeeeee!!!</p>
 </div>
 <div class=\"collectonme\">
 <p>Collect on meeeeee!!!</p>
 </div>
</body>
 <script type=\'text/javascript\'> 
 $(document).ready(function(){
 $(\'.collectonme\').hide();
 //Start the snow default options you can also make it snow in certain elements, etc.
 $(document).snowfall();
 
 $(\"#clear\").click(function(){
 $(document).snowfall(\'clear\'); // How you clear
 });
 
 $(\"#round\").click(function(){
 document.body.className = \"darkBg\";
 $(\'.collectonme\').hide();
 $(document).snowfall(\'clear\');
 $(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
 });
 
 $(\"#shadows\").click(function(){
 document.body.className = \"lightBg\";
 $(\'.collectonme\').hide();
 $(document).snowfall(\'clear\');
 $(document).snowfall({shadow : true, flakeCount:200}); // add shadows
 });

 $(\"#roundshadows\").click(function(){
 document.body.className = \"lightBg\";
 $(\'.collectonme\').hide();
 $(document).snowfall(\'clear\');
 $(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
 });
 
 

 $(\"#deviceorientation\").click(function(){
 $(document).snowfall(\'clear\');
 $(\'.collectonme\').hide();
 document.body.className = \"darkBg\";
 $(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
 });

 });
 </script>

<p align=\"center\"><font color=\"#FFFFFF\">来源：</font><a href=\"http://www.phpstudy.net/\" target=\"_blank\"><font color=\"#FFFFFF\">phpstudy</font></a></p>
</html>

以上就是为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/2233

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案