手机端网站首页开屏启动图代码的两种方式
2个月前
转载
超过65天
温馨提示
本文最后更新于2024年07月18日，已超过65天没有更新，若内容或图片失效，请留言反馈。
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
// 每次访问页面弹出一次，不影响刷新
$(document).ready(function(){
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
if(sessionStorage.getItem("isReload")){
$('.cpm-box').hide();
}else{
$(".cpm-time",".cpm").on("click",function(){
$('.cpm-box').hide();
});
$(".cpm-time").on("click",function(){
$('.cpm-box').hide();
});
$('.cpm-box').show();
var num = 5;
var settime = setInterval(function(){
if(num == 0){$('.cpm-box').hide();clearInterval(settime);}
num--;
$('.cpm-time span').html(num);
},1000);
sessionStorage.setItem("isReload", true)
}
};
});
文章来源：https://www.dawuyu.com/archives/509.html
none
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
演员
2个月前 . LV.0
换个主题效果会更好！ 这板子不太适合写这种内容。
寻梦xunm
2个月前 . LV.0
@演员
无所谓，反正没几个人看，就当收藏，避免用到的时候找不到