search

Home >Web Front-end >JS Tutorial >jquery realizes the Christmas blessing snowflake effect code sharing with snowflakes flying in the sky_jquery

jquery realizes the Christmas blessing snowflake effect code sharing with snowflakes flying in the sky_jquery

WBOY
WBOYOriginal
2016-05-16 15:43:571639browse

This is a Christmas blessing snowflake effect code based on jquery to implement the snowflakes flying all over the sky. The size of the snowflakes can be switched, and the user can also change the background image. It is a very practical slideshow special effects source code.

The jquery Christmas blessing snowflake effect with flying snowflakes in the sky, you can click to select different effects, please enjoy.

Effect Demonstration Source code download (If it does not work properly in the browser, you can try switching the browsing mode or choose to download directly)

The jquery Christmas blessing snowflake effect code for the snowflakes flying in the sky is as follows 

<!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.jb51.net/" target="_blank"><font color="#FFFFFF">脚本之家</font></a></p>
</html>

The above is the jquery Christmas blessing snowflake effect code for the flying snowflakes. I hope you like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Complete example of universal form validation plug-in implemented by JS_javascript skillsNext article：Complete example of universal form validation plug-in implemented by JS_javascript skills

Related articles

See more