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

这几天用到了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>