zoukankan      html  css  js  c++  java
  • 博客园返回头部

    页脚html

    <script src="https://files.cnblogs.com/files/zhonglinke/TweenMax.min.js"></script>
    <script src="https://files.cnblogs.com/files/zhonglinke/ScrollToPlugin.min.js"></script>
    <style type="text/css">
    /* 小火箭css */
    #gotop1 {
    80px;
    position: fixed;
    bottom: 30px;
    cursor: pointer;
    z-index: 99998;
    right: 3%;
    }
    /* 小火箭悬停特效 */
    #gotop1:hover {
    animation: rubberBand 1s;
    }

    @keyframes rubberBand {
    from {
    transform: scale3d(1, 1, 1);
    }

    30% {
    transform: scale3d(1.25, 0.75, 1);
    }

    40% {
    transform: scale3d(0.75, 1.25, 1);
    }

    50% {
    transform: scale3d(1.15, 0.85, 1);
    }

    65% {
    transform: scale3d(.95, 1.05, 1);
    }

    75% {
    transform: scale3d(1.05, .95, 1);
    }

    to {
    transform: scale3d(1, 1, 1);
    }
    }
    /* end 小火箭 */

    </style>

    <span id="gotop1" style="">
    <img src="https://www.cnblogs.com/images/cnblogs_com/zhonglinke/1429059/t_huojian1.png" tppabs="http://www.jq22.com/demo/jquery-top20161222/img/huojian.svg" alt="返回顶部小火箭">
    </span>
    <script type="text/javascript">
    /* 选择你喜欢的速度类型,复制下面的某段代码即可。不明处请咨询:qpjk.cc */
    $(function() {
    // 返回顶部,绑定gotop1图标和gotop2文字事件
    $("#gotop1,#gotop2").click(function(e) {
    TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});
    var huojian = new TimelineLite();
    huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease: Power4.easeOut})
    .to("#gotop1", 1, {y:-1000, opacity:0, ease: Power4.easeOut}, 0.6)
    .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4");
    });

    });
    </script>

  • 相关阅读:
    司法相关学习网站视频资料
    小型网站如何防范DDoS攻击
    教你9招 破解多种系统登陆密码方法 (1)
    加快Win7整体运行速度的12个小技巧
    手机指令大全,需要可以看看
    Java、fileless恶意软件威胁桌面安全
    浅谈Android手机木马手工查杀
    Win7路由器设置过程
    如何加强移动应用开发安全?
    FTP常用故障代码注解
  • 原文地址:https://www.cnblogs.com/brady-wang/p/11272120.html
Copyright © 2011-2022 走看看