左下角蕾姆到达底部,右下角拉姆返回顶部

查看演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码

把下面这段代码放入网站的页脚就可以使用啦~击掌祝你和蕾姆拉姆幸福~玫瑰

如果你的博客网站加载过jquery.js, 那么代码中的<script src="https://tanyaodan.com/wp-content/themes/Giligili/js/jquery.js" type="text/javascript"></script>可以不用再添加啦~

<style>
.sidebar_wo{position:fixed;line-height:0;bottom:0px;z-index:1;}
#leimu{left:0;-webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: translate(-7px,7px);
    -ms-transform: translate(-7px,7px);
    transform: translate(-7px,7px);}
#lamu{-webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: translate(7px,7px);
    -ms-transform: translate(7px,7px);
    transform: translate(7px,7px);right:0}
#leimu:hover{
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
#lamu:hover {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}
@media only screen and (max-width:1024px){.sidebar_wo{display:none}}
</style>

<div id="updown"> 
<div class="sidebar_wo" id="leimu" style="cursor:pointer">
<img src="https://tanyaodan.com/img/leimu_1.png" alt="雷姆" onmouseover="this.src='https://tanyaodan.com/img/leimu_2.png'" onmouseout="this.src='https://tanyaodan.com/img/leimu_1.png'" id="audioBtn">
</div>
<div class="sidebar_wo" id="lamu" style="cursor:pointer">
<img src="https://tanyaodan.com/img/lamu_1.png" alt="雷姆" onmouseover="this.src='https://tanyaodan.com/img/lamu_2.png'" onmouseout="this.src='https://tanyaodan.com/img/lamu_1.png'" id="audioBtn">
</div>
<script src="https://tanyaodan.com/wp-content/themes/Giligili/js/jquery.js" type="text/javascript"></script>
<script src="https://tanyaodan.com/wp-content/themes/Giligili/js/ud.js"></script>
</div>