手机端网站首页开屏启动图代码的两种方式
AI-摘要
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
手机端网站首页开屏启动图代码的两种方式,检测到是手机端打开网站就会像APP一样弹出启动图,并且右上角有跳过按钮。看到 QQ 群里有人想要这个代码,那就果断分享出来吧!
<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>
/*首页启动图*/
.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;
}
第一种是每次打开页面时会弹出一次,不影响网页刷新,只要不重新进入网页
第二种也是比较常见的通过记录 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();
});
<pre><code> $('.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)
}
};
});
第二种js
// 24小时内弹出一次
$(document).ready(function(){
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
if (!lcs.get('tb_wintips_ts') > 0){
$(".cpm-time").on("click",function(){
$('.cpm-box').hide();
lcs.set('tb_wintips_ts', $.now());
});
$(".cpm-time",".cpm").on("click",function(){
$('.cpm-box').hide();
lcs.set('tb_wintips_ts', $.now());
});
<pre><code> $('.cpm-box').show();
}
var num = 10;
var settime = setInterval(function(){
if(num == 0){$('.cpm-box').hide();clearInterval(settime);lcs.set('tb_wintips_ts', $.now());}
num--;
$('.cpm-time span').html(num);
},1000);
};
}); var lcs = { get: function(dataKey) { if (window.localStorage) { return localStorage.getItem(dataKey) } else { return $.cookie(dataKey) } }, set: function(key, value) { if (window.localStorage) { localStorage[key] = value } else { $.cookie(key, value) } }, remove: function(key) { if (window.localStorage) { localStorage.removeItem(key) } else { $.cookie(key, undefined) } } };
本文是转载文章,版权归原作者所有。建议访问原文,转载本文请联系原作者。
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果