Advertisement

js---小火箭回到顶部

阅读量:

比较粗糙,能到到效果,点击小火箭回到顶部,期间有小火箭的特效,

用到了css3的动画,JS的滚动事件

复制代码
        #firetop {
            width: 148px;
            height: 250px;
            background: url(<https://images.cnblogs.com/cnblogs_com/muyun123/1532955/o_rocket_button_up.png>);
            cursor: pointer;
            position: fixed;
            bottom: ;
            right: ;
            transition: bottom 1s;
            display: none;
        }
    
        #firetop:hover {
            background;
        }
    
        body {
            width: ;
            height: 7000px;
        }
    
        @keyframes move {
             {
                background;
            }
             {
                background;
            }
        }
    
    (function () {
        var);
        //当有滚动时触发事件function () {
            var//获取滚动条的移动距离var//屏幕可视区的高度if) {
                firetop.style.display //让回到顶部的小火箭出现elseif) {
                firetop.style.bottom //改变定位的位置            }
        }
        //点击事件function () {
            var window.scrollY;
            varfunction//定时器启动;                   
                ifwindow.innerHeight) {
                    firetop.style.display //小火箭隐藏//清除动画//还原小火箭位置                    clearInterval(timer);
                }
                window.scrollTo(//设置滚动条距离顶部的距离);
            this//给动画        }
    
    })();

转载于:https://www.cnblogs.com/muyun123/p/11431547.html

全部评论 (0)

还没有任何评论哟~