手机端网站首页开屏启动图代码的两种方式

原创 2023-10-02 23:28 上海
文章的分类 代码乐园

PIC_1696253911453.png

前言

看到 QQ 群里有人想要这个代码,那就果断分享出来吧!!

Html

<div class="cpm-box">
<a class="cpm" href="链接">
<div class="preview pop" style="/* visibility: hidden; */">    
    <img src="头像">
    <span class="txt-item" style="top:calc(15% + 150px)">标题</span>
    <span class="txt-item" style="top:calc(15% + 190px)">描述</span>
    </div>
    </a>
    <div class="cpm-time"><span></span> 立即跳过</div>
</div>

CSS

/*首页启动图*/
.cpm-box {overflow-x:hidden; position: fixed;z-index: 9999;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;display: none; background-color: white;}
.cpm-img {width: 100%;height: 100%;display: block;overflow: hidden;}
.cpm-img img {width: 100%;height: 100%;object-fit: cover;}
.cpm-time {right:15px;top:15px;padding:5px 10px;background:rgba(0, 0, 0, 0.4);color:rgba(255, 255, 255, 0.9);font-size:14px;border-radius:3px;}
.cpm-box_logo {height:15%;background:rgba(255, 255, 255, 0.9);}
.cpm-box_logo img {height:30%;margin-top:5.5%;}  
.cpm-time {position: absolute; cursor: pointer; position: fixed;z-index: 999999999999999;}
/****** 载入封面 *******/
.pop{position:fixed;top:0;left:0;z-index:9999999;display:flex;visibility:visible;overflow:hidden;width:100%;height:100%;background-image:url(背景图片);background-position:center 0;background-size:cover;background-repeat:no-repeat;text-align:center;flex-direction:column;justify-content:center;align-items:center;}
.pop img{position:absolute;top:15%;left:calc(50% - 50px);width:100px;height:100px;border-radius:100%;object-fit:cover;}
.pop .txt-item{position:absolute;left:0;z-index:12;overflow:hidden;width:100%;height:auto;max-width:100%;min-height:15px;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-weight:700;font-size:18px;}
/**/
.preview .post{
    cursor: pointer;
}

两种 Js 方式

第一种是每次打开页面时会弹出一次,不影响网页刷新,只要不重新进入网页第二种也是比较常见的通过记录 cookies 24 小时弹出一次

第一种 JS

隐藏内容,需要留言后方可查看

第二种 JS

隐藏内容,需要留言后方可查看



THE END


分享
赞赏
精选留言 写留言
    1. 我想要看看 来自广西南宁市联通 访客 头像

      谢谢分享

      4天前
    1. 阿猫 来自中国安徽省芜湖市鸠江区 访客 头像

      康康

      5月9日
    1. 肆柒玖 来自河南省郑州市移动 访客 头像

      看看

      2023年11月23日
    1. 邱全增 来自中国山东省临沂市兰陵县 访客 头像

      好代码

      2023年11月09日
    1. 小白s 来自上海市鹏博士宽带 访客 头像

      谢谢分享

      2023年10月22日
    1. 1 来自中国辽宁省沈阳市康平县 访客 头像

      666

      2023年10月10日
    1. 我相信 来自中国广西区南宁市西乡塘区 访客 头像

      看看

      2023年10月09日
    1. wrr 来自中国河北省沧州市任丘市 访客 头像

      看看

      2023年10月07日
      1. 我相信 来自广西南宁市联通 访客 头像
        @wrr

        谢谢分享

        2023年10月09日
    1. 来看看 来自中国广西区钦州市钦北区 访客 头像

      真不错

      2023年10月07日
    1. 永恒末匕 来自广西贵港市联通 访客 头像

      学习学习 表情

      2023年10月05日