UDN-企业互联网技术人气社区

板块导航

浏览  : 900
回复  : 2

[原生js] 雪花飘飘特效

[复制链接]
独领风骚的头像 楼主
发表于 2017-2-4 10:30:05 | 显示全部楼层 |阅读模式
  大家一进到小颖哒博客就看到好多雪花在飘,是不是觉得很美呢,接下来小颖就把这个技能告诉大家,可是大家记得打赏小颖哦!嘻嘻

  第一步:

  在网上下载jquery.js和jq.snow.js,并将它们通过“管理”->“文件”,上传至博客文件夹。

  第二步:

  找到“我的博客”->“管理”->“设置”,找到“页首Html代码”这个位置,将下面的代码复制进去。

  注意: 红色部分需要修改为你的博客地址名。实在不知道的话,你可以通过“我的博客”->“管理”->“设置”找到
2.png

  1. <script src="http://files.cnblogs.com/files/ yingzi1028 /jquery.js"></script>

  2. <script src="http://files.cnblogs.com/files/

  3. yingzi1028

  4. /jq.snow.js"></script>

  5.     <script src="http://files.cnblogs.com/files/yingzi1028/jquery.js"></script>
  6.     <script src="http://files.cnblogs.com/files/yingzi1028/jq.snow.js"></script>
  7.     <script>
  8.         $(function() {
  9.             $.fn.snow({
  10.                 minSize: 5, //雪花的最小尺寸
  11.                 maxSize: 40, //雪花的最大尺寸
  12.                 newOn: 100 //雪花出现的频率 这个数值越小雪花越多
  13.             });
  14.         });
  15.     </script>
复制代码

  第三步:

  其实这个大家也可以不用加,我是嫌弃不加页面横纵有滚动条丑的很,所以加了下面的样式:
1.png

  找到“我的博客”->“管理”->“设置”,找到“页面定制CSS代码”这个位置,将下面的代码复制进去。然后点击保存就好了。

  代码代码看这里:
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>雪花满屏飞</title>
  6.     <script src="js/jquery.js"></script>
  7.     <style media="screen">
  8.         body {
  9.             background: #3B3B3B url(images/bg.jpg) no-repeat center;
  10.             color: #ccc;
  11.             height: 1050px;
  12.             overflow-x: hidden;
  13.         }
  14.     </style>
  15. </head>

  16. <body>
  17.     <div style="display:none"></div>
  18.     <script src="js/jq.snow.js"></script>
  19.     <script>
  20.         $(function() {
  21.             $.fn.snow({
  22.                 minSize: 5, //雪花的最小尺寸
  23.                 maxSize: 40, //雪花的最大尺寸
  24.                 newOn: 100 //雪花出现的频率 这个数值越小雪花越多
  25.             });
  26.         });
  27.     </script>
  28. </body>

  29. </html>
复制代码

相关帖子

发表于 2017-2-4 10:30:37 来自手机 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2017-2-5 08:04:25 来自手机 | 显示全部楼层
Very Good!
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部