增加置顶信息的关注度,信息流广告,在列表中每页第六条信息后显示,插件默认随机显示三条置顶内容,让置顶更有价值。
使用方法:
下载插件,解压覆盖上传到services目录
电脑版
登录后台 - 广告 - 添加广告,广告位选择“电脑分类信息列表流”,类型设置为代码,宽高不用设置,边距不用设置,代码框中添加如下代码。
<style>.vsStrmBox{overflow: visible;}.randomtop{background-color: #FFFFEE; position: relative; width:1200px; float: none; clear: both; border-radius: 0px; box-shadow: 0 0px 3px rgb(58 18 18 /15%); padding: 10px 0px;}.randomtop .head{position:absolute; left: 0; top: 0; width:130px; height: 20px; overflow: hidden; border-bottom-right-radius: 15px;} .randomtop .head::before{content: "\20"; background-color: #ed414a; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.8; width: 100%; height: 20px; z-index: 1}.randomtop .head .title{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list .box .title a{color:#c81721;}.randomtop .tips{position:absolute; right: 0; bottom: 0; width:290px; height: 20px; overflow: hidden; border-top-left-radius: 15px;}.randomtop .tips::before{content: "\20"; background-color: #000; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.4; width: 100%; height: 20px; z-index: 1}.randomtop .tips .text{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list{display: flex; flex-wrap:wrap;}.randomtop .list .box{width:33%; font-size: 13px; padding:10px; line-height: 20px; box-sizing: border-box; display: flex; flex-grow:0;}.randomtop .list .box .pic{margin-right:5px;}.randomtop .list .box .pic img{width: 80px; height: 80px; border-radius: 3px;}.randomtop .list .box .text{ flex-grow:0; width:auto; overflow: hidden;}.randomtop .list .box .title{font-weight:bolder; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.randomtop .list .box .content{ height:40px; overflow: hidden;}.randomtop .list .box .state{color:#999; position: relative;}.randomtop .list .box .state span{margin-right:10px;}.randomtop .list .box .state .date::before{content: "\e65f"; font-family: iconfont; margin-right: 3px;}</style>
<div class="randomtop"><div class="head"><div class="title">置顶信息随机展示</div></div><div class="list"></div><div class="tips"><div class="text">信息置顶 - 让您的信息始终保持超高关注!</div></div></div>
<script type="text/javascript">
$(function(){
var irandomcount=3;
$.ajax({url:"/services/list/?cache="+Math.random(),type:"post",data:{s:"getrandominfo",count:irandomcount},success:function(data){data=JSON.parse(data);for(i=0;i<data["list"].length;i++){var pic="",title="["+data["list"][i]["sortname"]+"]"+data["list"][i]["title"];if(data["list"][i]["pic"].indexOf("noPic")==-1){pic="<div class=\"pic\"><img src=\""+data["list"][i]["pic"]+"\" /></div>";}if(data["list"][i]["price"].indexOf("面议")==-1){title=title+" <span>¥"+data["list"][i]["price"]+"</span>";}$(".randomtop .list").append("<div class=\"box\">"+pic+"<div class=\"text\"><div class=\"title\"><a href=\""+data["list"][i]["link"]+"\" target=\"_blank\">"+title+"</a></div><div class=\"content\">"+data["list"][i]["content"]+"</div><div class=\"state\"><span>"+data["list"][i]["addressname"]+"</span><span class=\"date\">"+data["list"][i]["date"]+"</span></div></div></div>");}},error:function(){}});})</script>
手机版
登录后台 - 广告 - 添加广告,广告位选择“手机分类信息列表流”,类型设置为代码,宽高不用设置,边距不用设置,代码框中添加如下代码。
<style>.vsStrmBox{overflow: visible;}.randomtop{background-color: #FFFFEE; position: relative; float: none; clear: both; border-radius: 0px; box-shadow: 0 0px 3px rgb(58 18 18 /15%); padding: 10px 0px; border-radius: 5px; margin: 0 5px; overflow: hidden;}.randomtop .head{position:absolute; left: 0; top: 0; width:130px; height: 20px; overflow: hidden; border-bottom-right-radius: 15px;} .randomtop .head::before{content: "\20"; background-color: #ed414a; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.8; width: 100%; height: 20px; z-index: 1}.randomtop .head .title{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list .box .title a{color:#c81721;}.randomtop .tips{position:absolute; right: 0; bottom: 0; width:290px; height: 20px; overflow: hidden; border-top-left-radius: 15px;}.randomtop .tips::before{content: "\20"; background-color: #000; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.4; width: 100%; height: 20px; z-index: 1}.randomtop .tips .text{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list{}.randomtop .list .box{ border-bottom: 1px solid #efefc2; font-size: 13px; padding:10px; line-height: 20px; box-sizing: border-box; display: flex; flex-grow:0;}.randomtop .list .box:last-of-type{border-bottom: 0px;}.randomtop .list .box .pic{margin-right:5px;}.randomtop .list .box .pic img{width: 80px; height: 80px; border-radius: 3px;}.randomtop .list .box .text{ flex-grow:0; width:auto; overflow: hidden;}.randomtop .list .box .title{font-weight:bolder; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.randomtop .list .box .content{ max-height:40px; overflow: hidden;}.randomtop .list .box .state{color:#999; position: relative;}.randomtop .list .box .state span{margin-right:10px;}.randomtop .list .box .state .date::before{content: "\e65f"; font-family: iconfont; margin-right: 3px;}</style>
<div class="randomtop"><div class="head"><div class="title">置顶信息随机展示</div></div><div class="list"></div><div class="tips"><div class="text">信息置顶 - 让您的信息始终保持超高关注!</div></div></div>
<script type="text/javascript">
$(function(){
var irandomcount=3;
$.ajax({url:"/services/list/?cache="+Math.random(),type:"post",data:{s:"getrandominfo",count:irandomcount},success:function(data){data=JSON.parse(data);for(i=0;i<data["list"].length;i++){var pic="",title="["+data["list"][i]["sortname"]+"]"+data["list"][i]["title"];if(data["list"][i]["pic"].indexOf("noPic")==-1){pic="<a href=\""+data["list"][i]["link"]+"\"><div class=\"pic\"><img src=\""+data["list"][i]["pic"]+"\" /></div></a>";}if(data["list"][i]["price"].indexOf("面议")==-1){title=title+" <span>¥"+data["list"][i]["price"]+"</span>";}$(".randomtop .list").append("<div class=\"box\">"+pic+"<div class=\"text\"><div class=\"title\"><a href=\""+data["list"][i]["link"]+"\">"+title+"</a></div><a href=\""+data["list"][i]["link"]+"\"><div class=\"content\">"+data["list"][i]["content"]+"</div></a><div class=\"state\"><span>"+data["list"][i]["addressname"]+"</span><span class=\"date\">"+data["list"][i]["date"]+"</span></div></div></div>");}},error:function(){}});})</script>
在后台 - 设置中,可以设置信息流广告的显示方式。设置为循环显示,信息列表中就会一直随机显示置顶内容。修改代码中var irandomcount=3;的数字,调整随机显示置顶的数量,如:var irandomcount=6;为随机显示6条置顶内容。