H5右侧悬浮

原创已于 2022-02-15 16:51:34 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

于 2020-10-31 16:15:05 首次发布

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍了如何在H5中实现右侧悬浮效果，并且详细讲述了点击展开、收回及移除的功能。通过html和css代码片段，展示了具体的实现步骤，强调了在布局时使用绝对定位和margin的重要性。

前言：实现H5右侧悬浮，点击展开收回移除；

示例如下 ↓

默认：

在这里插入图片描述

点击动画移入：

在这里插入图片描述

html代码片段：

 <div class="right_item_menu">   
  <i class="right_menu_icon"></i>
    <div class="right_item" style="display: none;">
        <span class="right_item_title">今日XXX</span> 
        <div class="right_content">
        	   <img src="../pic.png" alt="">
             <p></p>
        </div>
        <i class="right_close_btn"></i>
    </div>
</div>

css代码片段：

.right_menu_icon{width:1rem;height:0.68rem;background: url(../images/right_icon.png);background-size: 100%;display: inline-block;position: absolute;top: -0.18rem;left:0rem;}
.right_item_menu{position: fixed;margin-left: 6.6rem;top:40%;color:#333;border-radius: 20px;padding-left:0.62rem;width: 5.8rem;z-index: 999;font-size:0.28rem;}
.right_item{background-color: #fff;color:#333;display: inline-block;border-radius: 5px;position: relative;width:100%;box-shadow: 5px 2px 8px 0px #e6e1e1;display: flex;align-items: center;}
.right_item_title{display: inline-block;}
.right_content{display: inline-block;width:2.8rem;height:0.5rem;display: flex;align-items: center;}
.right_close_btn{position: absolute;width: 0.3rem;height: 0.3rem;right: 0.05rem;top: 0.1rem;background: url(../images/delt.svg) no-repeat;background-size: 100%;border-radius: 100%;}
.right_content img{width:0.6rem;height:0.6rem;box-sizing: border-box;padding:0.02rem;border-radius: 100%;display: inline-block;align-items: baseline;}
.right_content p{white-space: normal;text-overflow: ellipsis;overflow: hidden;width: 2rem;height: 100%;line-height: 0.52rem;}

代码如下 ↓
注意：右侧悬浮绝对定位用margin是相对于body ；

$(".right_item_menu").click(function(){
    if($(this).hasClass('move_left')){
        $(this).find('.right_item').hide();
        $(this).animate({'margin-left':'6.6rem'},"slow").removeClass('move_left');
    }else{
        $(this).animate({'margin-left':'1.6rem'},"slow").addClass('move_left');
        $(this).find('.right_item').show();
    }
});
//关闭移除
$(".right_close_btn").click(function(){
    $(this).parents('.right_item_menu').hide();
});
//移动端适配：
(function(doc, win) {

    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                // 这里的640 取决于设计稿的宽度
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);