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

一、循环滚动的文字

<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启动弹框

.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>