QQ爹の博客 QQ爹の博客

博客被人丢进了雷姆

in 代码相关,acg相关 read (2745) 330汉字 文章转载请注明来源!

文章已更新,详情移至《左雷姆右拉姆至顶至底源码

雷姆 (“Re:从零开始的异世界生活”中的人物)
雷姆,轻小说《Re:从零开始的异世界生活》及其衍生作品的登场角色,在罗兹沃尔的宅邸中一手担当全部杂务的双胞胎女仆中的妹妹,貌恭而实不敬的毒舌担当;宅邸的机能得以维持,可说是完全仰仗她的有能。

昨天在手机上看到了这两张图片:


当时我就灵光一闪,这个加在博客的左下角,必定是极好的。于是实现了下,效果见博客右下角(手机等窄屏端看不到哦)

图片部分:
于是下载原图,ps把白色背景p成透明,把图片尺寸改为75*55,最后上传图片。

代码html部分:

  <div class="sidebar_wo">
<img src="图片一链接" alt="雷姆.png" onmouseover="this.src='图片二链接'" onmouseout="this.src='图片一链接'" id="audioBtn">
</div>

代码css部分:

.sidebar_wo{    
position: fixed;
bottom: 0px;//让图片固定到网站底部
left: 0;//让图片靠左
z-index: 1;
}
@media only screen and (max-width:767px){
.sidebar_wo{
display: none;//屏幕尺寸小于767px时隐藏雷姆
}
}

css部分大致是这样,根据你的模板不同可能会需要稍加改动。

我的博客的雷姆点击会有背景音乐哦,背景音乐这里就不提了哈,网上也有很多教程哈。

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

雷姆萌物网页挂件美化
最后由Jrotty编辑于2016-09-15 22:10
发表新评论
已有 26 条评论
  1. Hazymoon
    Hazymoon
    回复

    把拉姆的大图交出来

    1. Jrotty
      Jrotty
      回复

      @Hazymoon 我没保留原图哈

  2. KanekiKen
    KanekiKen
    回复

    博主你好,拉姆和蕾姆在wordpress上怎么实现呢?

    1. Jrotty
      Jrotty
      回复

      @KanekiKen 这个跟博客程序无关,详见demo地址在https://qqdie.com/archives/left-right-rem-rahm-top-to-bottom-source.html

  3. 我一本正经地说

    请问雷姆的动态效果和点击最底部是哪个Js实现的?

    1. Jrotty
      Jrotty
      回复

      @我一本正经地说 我博客源码里有个kz.js里面有中文标识哪个是置顶置底,需要加载jquery,雷姆那个动态是css实现的,你自己查下我的css就能看到

  4. 疯狂减肥带
    疯狂减肥带
    回复

    ( ̄ε(# ̄) Σ评论魔改的不错

    1. Jrotty
      Jrotty
      回复

      @疯狂减肥带 都是朋友的帮助!css是别人的!颜表情也是别人写的

  5. 惠阳凯凯
    惠阳凯凯
    回复

    为啥我的头像不显示呀 呜呜呜~

    1. Jrotty
      Jrotty
      回复

      @惠阳凯凯 头像现在应该可以显示了,如果还没有显示清除缓存试试。

  6. 惠阳凯凯
    惠阳凯凯
    回复

    博主你的pjax有bug,点击文章里面的图片,再点击弹出窗的小图,再关闭弹出的窗口,pjax的加载动画就一直在加载,鼠标点哪里都点不了。

    1. Jrotty
      Jrotty
      回复

      @惠阳凯凯 确实哈,我这就尝试去修复下

前篇 后篇

评论提交中...

雷姆
拉姆
音乐加载中...
0:00