【css应用小集合】循环滚动的文字 app启动弹框悬浮二维码回到顶部

本文链接：https://blog.csdn.net/dengpeng0419/article/details/69912736

这几天用到了css中的几个方法，做个小集合记录一下

一、循环滚动的文字

要实现这种效果有很多种方法，包括swiper组件、css动画、marquee属性以及jQuery，其中swiper组件的方法逼真但加载文件较大，css动画实现的方法需要预先知道文字的个数，marquee可以连续展示文字但逐条循环不逼真，所以这里记录下jQuery的实现方法。

<style>
        ul{
            width:210px;
            line-height:22px;
            height:22px;
            overflow:hidden;
        }
        li{
            list-style-type:none;
            float:left;
        }
  </style>

<script>
    var tid;
    var pause=false;
    var start=function(){
       tid= setInterval(slide,50);
    }
    var slide=function(){
       if(pause) return; //当鼠标落在对应文字上时，停止滚动
       $("ul").scrollTop($("ul").scrollTop()+1);  
       if($("ul").scrollTop()%22==0){
            clearInterval(tid); //没展示完一条就停止计时
            $("ul").append("<li>"+$("ul li:first").html()+"</li>");//获取第一条文字
            $("ul li:first").remove();//删除第一条已经展示过的文字
            $("ul").scrollTop("0");
            setTimeout(start,500);//500ms之后再次计时，开始下一条文字的展示
       }
    }
    $(document).ready(function(){
        $("ul").hover(
           function(){pause=true},
           function(){pause=false}
        );
    })
    setTimeout(start,500);
</script>

<ul>
    <li>1111111111111111111</li>
    <li>2222222222222222222 </li>
    <li>3333333333333333333</li>
</ul>

二、app启动弹框

app启动弹框的效果是，从屏幕内部向外增大，有种弹出的感觉，其实主要是transform控制图片由小变大，opacity由0到1。

.qbup-model{
    min-height: 100vh;
    width: 100%;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(0,0,0,.4);
}
.qbup-model .model{
    background: url('./image.jpg') no-repeat;
    background-size: 100% 100%;
    width: 12rem;
    height: 14.85rem;
    top:50%;
    left:50%;
    margin-top: -7.4rem;
    margin-left:-6rem;
    position:absolute;
    opacity: 0;
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    transition: opacity 0.4s, transform 0.4s;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
}
.qbup-model .model.active{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}

三、悬浮二维码&回到顶部

<style>
.rocket-to-top {
    top: 50%;
    right: 35px;
    z-index: 11;
    display: block;
    overflow: hidden;
    margin: -170px 0 0;
    padding: 0;
    cursor: default;
}
.top{
    width: 166px;
    height: 274px;
    background: url('./image.jpg') no-repeat scroll center center;
}
.bottom{
    display: block;
    width: 166px;
    height: 30px;
    background: url('./image.jpg') no-repeat scroll center center;
}
</style>    
<div class="rocket-to-top">      
    <div class="top">
    </div>      
    <a href="javascript:scroll(0,0)" class="bottom"></a>
     //设置javascript:scroll(0,0)，点击该图片回到顶部    
</div> 

<script>//侧边栏显示
    $(function() {
        var e = $(".rocket-to-top"),
            f = 'fix' + 'ed',
            t = $(document).scrollTop(),
            i = 0;
        $(window).scroll(function() {
            var t = $(document).scrollTop();
            if (t > 400) {//当页面滚动到距离顶部400px时，出现悬浮二维码，并fixed
                e.fadeIn("fast")
                $('.rocket-to-top').css('position', f);
            } else {
                e.fadeOut("slow")
            }
        })
    })
</script>