这是一个很无聊的功能,当访问我们的网页时,如中途有事或离开当前页面超过三分钟,页面即会弹窗显示一个DIV。
当然DIV里的内容可以随便编辑,可以是你网站的热点新闻,也可以是一张搞笑的图片,亦或是利用一言的API随机出一条文字。
很多很多的玩法可以自行去完善挖掘,下面开始上代码。当然如果您的网站没有引入js文件,需要先引用js包。
首先是css部分,由于每个人的网页布局都不一样,可以适当根据自己的网站博客调整相应的css。
<style>
#a_showhotnews_list_dia{
width:100%;
height:1000px;
background-color: rgba(0,0,0,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
position: absolute;
z-index: 999999999999999999999999;
top: 0;
left: 0;
}
.tj_box{
width:1000px;
height:480px;
background-color:rgb(250,250,250);
margin:96px auto 0;
border-radius: 10px;
}
.tj_top{
padding:10px 20px 10px 20px;
height:40px;
line-height:40px;
color:#666;
FONT-FAMILY:"Heiti", "Microsoft YaHei", "Arial Narrow";
font-size:20px;
position:relative;
}
.tj_top .close1{
position:absolute;
top:18px;
right:25px;
height:19px;
width:19px;
border:#F00;
}
.tj_top .close1 a{
height:19px;
width:19px;
display:inline-block;
background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat;
}
.tj_top .close1 a:hover{
background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat -19px 0;
}
</style>
以下是DIV部分,在页面添加以下代码,即可。
<div id="a_showhotnews_list_dia" style="display:none">
<div id="a_showhotnews_list" class="tj_box">
<div class="tj_top">本网页已闲置超过3分钟,按键盘任意键或点击空白处,即可回到网页
<div id="a_showhotnews_top_close" class="close1"><a target="_self" href="javascript:void(0)"></a></div>
</div>
</div>
</div>
最后的话,是一段监测事件的JS,同理,加入网页底部即可。
<script>
$(function() {
var f = ((1 * 60) + 2) * 1000;
var g;
var e = 0;
var b = $('#a_showhotnews_list_dia');
var d = $("#a_showhotnews_list");
var h = parseInt(d.css("margin-top").replace(/px/, ""));
var a = $("#a_showhotnews_list_close");
a.click(function() {
b.hide()
});
var xf_top = $("#a_showhotnews_top_close");
xf_top.click(function() {
b.hide()
});
$(window).keypress(function() {
b.hide()
});
b.click(function() {
b.hide()
});
d.click(function(i) {
i.stopPropagation()
});
$.fn.triggerPageRefresh = function() {
location.reload()
};
$.fn.resetIdleTimeup = function() {
if (g !== null) {
clearTimeout(g)
}
g = setTimeout(function() {
if (b.css("display") === "none") {
var i = h + $(window).scrollTop();
d.css({
"margin-top": i
});
b.css({
"height":$(document).height()
});
b.show();
try {
ga('send', 'event', 'xuanfu', 'show', 'xuanfu',1);
} catch (e) {}
}
}, f)
};
$("body").mousemove(function() {
if (b.css("display") === "none") {
b.resetIdleTimeup()
}
}).resetIdleTimeup()
});
if(document.getElementById("a_hotnews_list_c")!=null)
{
document.getElementById('a_hotnews_list_c').onclick = function() {
try {
ga('send', 'event', 'xuanfu_c', 'click', 'xuanfu_c',1);
} catch (e) {}
}
}
</script>
至此,代码部分就完成啦,效果如下。如有问题,可下方留言探讨哦!
本文由 Jdeal 创作,采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。
最后编辑时间为: 2019-07-26 13:26
学习了,谢谢!
hhhhhh 突然发现博客的等级是我以前写的方法,罩杯制
哈哈,猥琐风~