首页 🍋Code,🥭笔记

看起来很可爱就去扒下来了
leimuB.png

演示

下载地址

https://blog.catdog007.icu/wenjie/?%E6%BA%90%E7%A0%81/%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8%E4%BB%A3%E7%A0%81HTML

HTML部分

    <script src="jquery-3.5.1.min.js"></script>
        <div id="updown">
            <div class="sidebar_wo" id="leimu">
            <img src="leimuA.png" alt="雷姆" onmouseover="this.src='leimuB.png'" onmouseout="this.src='leimuA.png'" id="audioBtn"></div>
            <div class="sidebar_wo" id="lamu"><img src="lamuA.png" alt="雷姆" onmouseover="this.src='/getTop-rem/lamuB.png'" onmouseout="this.src='/getTop-rem/lamuA.png'" id="audioBtn"></div>
<script type="text/javascript" src="top.js"></script>></div>
<script type="text/javascript" src="/getTop-rem/top.js"></script>
<div id="landlord" style="left: 109px; bottom: 68px; display: none;">

CSS部分

.sidebar_wo{position:fixed;line-height:0;bottom:0;z-index:1000}
#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)}
#updown img{cursor:pointer}
@media only screen and (max-width:1024px){.sidebar_wo{display:none}
}

js部分

需要引入JQUERY

<script src="jquery-3.5.1.min.js"></script>

gettop.js

$(function(){$("#updown > #lamu img").eq(0).click(function(){$("html,body").animate({scrollTop:0},800);return false});$("#updown > #leimu img").eq(0).click(function(){$("html,body").animate({scrollTop:$(document).height()},800);return false})});



文章评论

    一叶竹 访客ChromeAndroid
    10天 前   回复

    这个,貌似typecho有这个插件。

      purecat 访客ChromeAndroid
      10天 前   回复

      就是为了不安插件搞得,而且可以用到普通网页里
      很棒

目录