友人C

樱花飘落特效 js 代码_( ゚Д゚)ノ
最近在看《四月是你的谎言》,还没有看完,挺好看的!看来我要掉日漫的坑了!然后,里面出现了很多樱花的画面,很美是么,...
扫描右侧二维码阅读全文
01
2016/09

樱花飘落特效 js 代码_( ゚Д゚)ノ

最近在看《四月是你的谎言》,还没有看完,挺好看的!看来我要掉日漫的坑了!然后,里面出现了很多樱花的画面,很美是么,所以我需要这个!

效果就是本站的效果啦!

四月是你的谎言.jpg

CSS文件

<link type="text/css" rel="stylesheet" media="screen" href="https://www.ihewro.com/texiao/yinghua/jquery-sakura.css" />

加载js文件

注意:因为我测试了一下下哈,在手机上用这个特效滑动有点不顺畅,不知道是不是我的手机不行==,所以我做了判断,屏幕小的话是不会加载这个js的。
<script>
if (screen && screen.width > 480) {
  document.write('<script src="https://www.ihewro.com/texiao/yinghua/jquery-sakura.js"><\/script><script type="text/javascript">$(function(){$("body").sakura()});$(window).load(function(){$("body").sakura()});<\/script>');
}
</script>

发现在手机UC浏览器还是能加载特效,于是改成了下面这种

<script>
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
{}
else
{  document.write('<script src="https://www.ihewro.com/texiao/yinghua/jquery-sakura.js"><\/script><script type="text/javascript">$(function(){$("body").sakura()});$(window).load(function(){$("body").sakura()});<\/script>');}
</script>

参考文章

樱花飘落特效 js 代码
手机端不加载js文件,PC端要加载js文件,怎么做的?

最后修改:2019 年 03 月 23 日 11 : 12 AM
打赏一包辣条钱吧,唔该啊大佬

49 条评论

  1. 重庆最帅

    博主代码复制到上面没用呀?ヾ(≧∇≦*)ゝ

  2. xema

    两张图片好像是挂了吧

    1. 友人C
      @xema

      对 这图片地址ihewro.com域名的

  3. 有点女性化了 #[吐舌]

    1. 一日
      [捂嘴笑]
  4. 闲鱼
    [滑稽]逼格不错
    1. 一日
      @闲鱼 [滑稽]谢谢!
  5. 三秋

    老司机推荐上dilidili看魔装学院,从此世界变颜色。#[滑稽]

    1. 一日
      @三秋 一搜索魔装学院 "魔装学园H×H无删减"#[滑稽]
      1. 三秋
        @一日

        老司机深情推荐。

  6. 超级男孩
    [不高兴]
  7. 拾叁同学

    博主请教一个问题,怎么自定义浏览器滚动条?怎么实现的?另外,你的站一天挂几次了0 0……

    1. 一日
      @拾叁同学

      加点CSS就行。只能支持webkit内核浏览器(大部分浏览器) /* *webkit浏览器滚动条样式 */ ::-webkit-scrollbar { height:8px; width:6px; } ::-webkit-scrollbar-button { height:0; width:0; } ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display:block; } ::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement { display:none; } ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-style:solid; border-color:transparent; } ::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{ background-clip:padding-box; background-color:#fff; } ::-webkit-scrollbar-thumb { -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); background-clip:padding-box; background-color:rgba(0,0,0,.5); min-height:28px; padding-top:100px; } ::-webkit-scrollbar-thumb:hover { -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25); background-color:rgba(0,0,0,.4); } ::-webkit-scrollbar-thumb:active { -webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.35); background-color:rgba(0,0,0,.5); } ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-width:0; } ::-webkit-scrollbar-track:hover { -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1); background-color:rgba(0,0,0,.05); } ::-webkit-scrollbar-track:active { -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07); background-color:rgba(0,0,0,.05); } /* * end webkit浏览器滚动条样式 */

      1. 拾叁同学
        @一日

        加在哪里

        1. 一日
          @拾叁同学

          CSS文件 加到 head.php的标签前面js文件 加到foot.php

          1. 拾叁同学
            @一日

            JS文件在哪?我要报警了

            1. 一日
    2. 一日
      @拾叁同学

      前天下午主机商那边说机房迁移,挂了半天== 今天也挂了吗?

      1. 拾叁同学
        @一日

        今天我发现你的站挂了2次

        1. 一日
          @拾叁同学

          最近几天确实不稳定

        2. 一日
          @拾叁同学 看来以后得换一个主机
          1. 拾叁同学
            @一日

            欢迎来看看我的第一篇文章,有提到老薛主机,真心不错。可以按季付。还可以买独立IP 一个月15.真心挺划算的。过几天等学生证下来就去看看阿里的学生主机了。大学生福利#(小眼睛)

            1. 一日
              @拾叁同学

              阿里云的学生主机要备案哒,感觉好麻烦==,以后还是换老薛主机吧

              1. Sealt
                @一日

                如果要主机的话可以迁移到我的IDCF机子喵(๑•̀ㅁ•́ฅ),LNMP1.3[PHP5.6],一直用着蛮不错的。

                1. 友人C
                  @Sealt

                  3Q辣,如果备案成功的话只能用国内主机了

                  1. Sealt
                    @友人C

                    並不是哦,我的博客備案了,然而用的就是IDCF,貌似阿里雲騰訊雲不可以QAQ,୧(๑•̀⌄•́๑)૭

              2. 拾叁同学
                @一日

                备案只是域名备案撒,域名备案并不麻烦,只要你有阿里云的云主机或者虚拟主机就可以免费备案。域名最好还是备案好一点,毕竟很多CDN服务商都是要求域名备案的,比如七牛

  8. 三秋

    一入B站深似海。

    1. 一日
      @三秋

      从此#[滑稽]

  9. 千千

    直线飘落的樱花

    1. 一日
      @千千 (喜极而泣)樱花
      1. 千千
        @一日

        有人说,樱花飘落的速度是每秒中五厘米哦~

        1. 一日
          @千千

          让我想到一部动漫名称,秒速五厘米,虽然还没看过#[笑尿]

          1. 千千
            @一日 我也是前些天看的
  10. 千千

    所以我的站很多图片都是四月里面的呢!

    1. 一日
      @千千

      我看到了!

  11. 16

    话说这部很好看,也好虐……

    1. 一日
      @16 还在看,不过女主好像要悲剧了(>﹏<)
  12. 兰陵笑笑生

    先入坑再说,看完你就心塞了。国漫也有很多很好的

    1. 一日
      @兰陵笑笑生

      (`Δ´)ゞ准备入坑。二次元坑。国漫只看过《狐妖小红娘》也是别人带我看的#

      1. 兰陵笑笑生
        @一日

        想看唯美的可以去看看新海诚的作品#(击掌)

        1. 一日
          @兰陵笑笑生

          老手啊!收藏了,没有事情时候就去看!妈妈再也不怕我无聊了#[笑尿]

      2. 兰陵笑笑生
        @一日

        国漫可以看看最近的镇魂街,一人之下(国语神OP),勇者大冒险(我怀疑屏幕对面90%是腐妹子)。那个双肛城,啊呸,双月之城我还没看。还有那个什么墓王之王麒麟决,那头发,柔顺亮丽#(鼓掌)。以上是新番,未完结。狐妖小红娘正在补···

  13. yufan

    我也想去看看#[滑稽]

    1. 一日
      @yufan

      好看!女主超漂亮#

      1. yufan
        @一日 哈哈不过高二了学习繁忙#(喜极而泣)
        1. 一日
          @yufan (看不见)加油哒!
  14. 以歌。先生

    你这边最近折腾的也是比较厉害了

    1. 一日
      @以歌。先生

      差不多是最后的折腾啦#(吐血倒地)

发表评论