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

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

php中文网

发布： 2016-05-16 15:43:57

原创

1754人浏览过

这是一款基于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 class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2102">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680087392329.png" alt="剪小映">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2102">剪小映</a>
                            <p>记录美好智能成片，AI智能视频剪辑</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="剪小映">
                                <span>902</span>
                            </div>
                        </div>
                        <a href="/ai/2102" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="剪小映">
                        </a>
                    </div>
                
 </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>

登录后复制

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