记录,以后可能自己要用
<style>
.t-right-side-bar{
position: fixed;
width: 50px;
padding: 10px 0;
bottom: 144px;
right: 20px;
z-index: 886;
}
.t-side-toolbar{
margin-bottom: 10px;
animation: toolbarout 0.5s;
}
.t-side-toolbar .toolbar-item{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
position: relative;
}
.t-side-toolbar .toolbar-item:before{
position: absolute;
width: 80%;
height: 1px;
background: #f5f5f5;
bottom: 0;
left: 10%;
content: ' ';
border: 50px;
}
.t-to-top{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
display: none;
}
.t-to-top-on{
animation: toolbar 0.5s;
}
.t-to-top-on-tow{
animation: toolbar 0.7s;
}
.t-to-top-on-out{
animation: toolbarout 0.5s;
}
.t-side-toolbar,.t-to-top{
background: #FFF;
box-shadow: 0px 5px 40px 0px rgb(17 58 93 / 10%) ;
border-radius: 3px;
cursor: pointer;
transition: all 2s;
-webkit-transition: all 2s; /* Safari */
}
.t-f-s-20{
font-size: 20px;
}
.toolbar-item .t-nav-ewm{
position: absolute;
right: 50px;
bottom: 0;
width: 110px;
height: 100px;
padding-right: 10px;
overflow: hidden;
}
.toolbar-item .t-nav-ewm div{
width: 100%;
height: 100%;
}
@keyframes toolbar
{
from {transform: translateY(30px);}
to {transform: translateY(0px);}
}
@-webkit-keyframes toolbar /* Safari 与 Chrome */
{
from {transform: translateY(30px);}
to {transform: translateY(0px);}
}
@keyframes toolbarout
{
from {transform: translateY(-30px);}
to {transform: translateY(0px);}
}
@-webkit-keyframes toolbarout /* Safari 与 Chrome */
{
from {transform: translateY(-30px);}
to {transform: translateY(0px);}
}
@media screen and (min-width: 1366px) {
.t-right-side-bar{
right: 70px;
}
}
</style>
<div class="t-right-side-bar" >
<!---->
<div class="t-side-toolbar" >
<div class="toolbar-item" >
<i class="iconfont icon-taiyang t-f-s-20"></i>
</div>
<div class="toolbar-item" id="ctrl_c">
<i class="iconfont icon-Star"></i>
</div>
<div class="toolbar-item" >
<i class="iconfont icon-erweima"></i>
<div class="t-nav-ewm">
<div id="t-qrcode">
</div>
</div>
</div>
<div class="toolbar-item" >
<i class="iconfont icon-fenxiang"></i>
</div>
</div>
<div class="t-to-top" >
<i class="iconfont icon-a-Arrow-Up2"></i>
</div>
<!---->
</div>
<script>
$(function(){
$(window).scroll(function() {
var scroHei = $(window).scrollTop();//滚动的高度
if (scroHei > 800) {
$('.t-to-top').show().addClass('t-to-top-on-tow');
$('.t-side-toolbar').addClass('t-to-top-on');
} else {
$('.t-to-top').hide().removeClass('t-to-top-on-tow');
$('.t-side-toolbar').removeClass('t-to-top-on');
}
})
// 返回顶部
$('.t-to-top').on('click',function () {
// 设置滚动动画,这里注意使用的是$('body')不是$(window)
$("html,body").animate({ scrollTop:0},500);
});
// 收藏
$("#ctrl_c").click(function(){
var ctrl=(navigator.userAgent.toLowerCase()).indexOf('mac')!=-1?'Command/Cmd': 'CTRL';
if(document.all){
window.external.addFavorite('http://thinker.e123e.cn/', '听风');
}
else if(window.sidebar){
window.sidebar.addPanel('听风', 'http://thinker.e123e.cn/', "");
}
else{
alert('您的浏览器不支持直接收藏,您可以通过快捷键Ctrl + D 加入到收藏夹');
}
});
//二维码
$('#t-qrcode').qrcode({
render: "canvas", //也可以替换为table
width: 100,
height: 100,
text: "http://www.jq22.com"
});
})
</script>
说说你的见解