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

原创 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. 永恒末匕 来自广西贵港市联通 访客 头像

      学习学习 表情

      2023年10月05日
    1. 漫川 来自河南省移动 访客 头像

      不错

      2023年10月04日
    1. 来自安徽省亳州市电信 访客 头像

      看看

      2023年10月04日
    1. 吃猫的鱼 来自广东省移动 访客 头像

      我来看看。

      2023年10月04日
    1. 时迁 来自中国广东省东莞市 访客 头像

      看起来不错

      2023年10月04日
    1. 安逸朴 来自陕西省汉中市电信 访客 头像

      拿去试试看

      2023年10月04日
    1. 过客 来自湖北省襄阳市联通 访客 头像

      看看

      2023年10月04日
    1. niubi 来自中国移动 访客 头像

      diao

      2023年10月03日
    1. joy 来自中国山东省枣庄市市中区 访客 头像

      重新来下载一下

      2023年10月03日
    1. 青枫 来自中国移动 访客 头像

      哇哇哇谢谢大佬 表情

      2023年10月03日