Asdrt852

雷姆拉姆置顶置底
1,上传jquery.js和ud.js,还有四张雷姆拉姆图片至自己的服务器下载链接:https://pan.bai...
扫描右侧二维码阅读全文
30
2018/07

雷姆拉姆置顶置底

1,上传jquery.js和ud.js,还有四张雷姆拉姆图片至自己的服务器

下载链接:https://pan.baidu.com/s/1s6VXIQOwjCW8qNIhOS0nfw 密码:03i6

2,复制下面代码到自己网站模板的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);
}
@media only screen and (max-width:1024px){.sidebar_wo{display:none}}

3,复制代码,添加到自己网站的底部。

如果你的博客加载过jquery.js
代码中的<script src="jquery.js" type="text/javascript"></script>可以不加

<div id="updown"> 
<div class="sidebar_wo" id="leimu">
<img src="leimu_1.png" alt="雷姆" onmouseover="this.src='leimu_2.png'" onmouseout="this.src='leimu_1.png'" id="audioBtn">
</div>
<div class="sidebar_wo" id="lamu">
<img src="lamu_1.png" alt="雷姆" onmouseover="this.src='lamu_2.png'" onmouseout="this.src='lamu_1.png'" id="audioBtn">
</div>

<script src="jquery.js" type="text/javascript"></script>
<script src="ud.js"></script>

4,一定要注意:代码中的图片路径和js路径一定要和实际存储的路径一致,否则图片会不加载,至顶置底功能无效。

Last modification:July 30th, 2018 at 09:01 pm
If you think my article is useful to you, please feel free to appreciate

4 comments

  1. 搬瓦工

    朋友 交换链接吗

    1. Asdrt852
      @搬瓦工

      换!
      ⚪博客名称:Asdrt
      ⚪博客网址:https://asdrt666.com
      ⚪博客头像:https://asdrt666.com/usr/themes/handsome/usr/img/hade.png
      ⚪博客简介:面朝大海,春暖花开。

      1. 搬瓦工
        @Asdrt852

        贵站链接已加,我站:https://www.laopan.org/ (搬瓦工)

        1. Asdrt852
          @搬瓦工

          已加!

Leave a Comment