之前发了一篇带日期时间的LED滚动广告屏文章,详见下方链接。我个人是喜欢用后台解决前端显示问题的,这个LED广告屏也不例外,因为一直没时间就搁置了,趁着年后上班事情不多赶紧给捣鼓出来了。分享给需要的朋友们。
这款LED广告滚动屏和之前纯代码版的一样,也支持多条广告内容显示且会滚动显示。不同之处在于后台版的每条广告内容实现了全UI操作且能够单独设置颜色、内容、链接。直接看食用方法吧
func.php或functions.php中加入以下代码
//LED广告开始 zuoxm
function zuoxm_ledads(){
$led_ads_fields=_pz('ZUOXM_LEDADS_CONTENT');
$led_ads_img=_pz("ZUOXM_LEDADS_IMG");
if (!empty($led_ads_fields)){
$led_ads = '<style>
.studytextgzbox {
background: #F9F9F9;
border: 1px solid #999999;
margin: 1px;
text-align:center;
float: left;
line-height: 28px;
height: 28px;
overflow: hidden;
width: 236px;
}
.zzbuluoled:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
@media (max-width: 768px){.zzbuluoled{display: none;}}//注释这行则手机端也会显示LED
.wp zzbuluoled{
margin-top:0px;
}
#systimeshow{
float: left;
margin-top: 10px;
font-weight:bolder;
color:#FF0000;
font-size:16px;
font-family: "微软正黑体","黑体_GB2312","微软正黑体";
width: 130px;
}
.zxm_led{
background: url("'.$led_ads_img.'");
text-align: center;
height:80px;
border: 0px solid #E8EFF5;
}
.zzbuluoled_sx{
width:auto;
overflow:hidden;
height:80px;
line-height:80px;
text-align:left;
}
.p{
padding:0px 10px 0px 16px;
vertical-align:middle;
height:80px;
overflow:hidden;
}
.txt{
font-weight:900;
font-size: 60px;
line-height:80px;
}
</style>
<div class="container fluid-widget">
<div class="widget_text zib-widget widget_custom_html">
<div class="textwidget custom-html-widget">
<div class="wp zzbuluoled">
<div class="zxm_led">
<div id="systimeshow"></div>
<script language="javascript">
function getCurDate()
{
var d = new Date();
var week;
switch (d.getDay()){
case 1: week="星期一"; break;
case 2: week="星期二"; break;
case 3: week="星期三"; break;
case 4: week="星期四"; break;
case 5: week="星期五"; break;
case 6: week="星期六"; break;
default: week="星期天";
}
var years = d.getFullYear();
var month = add_zero(d.getMonth()+1);
var days = add_zero(d.getDate());
var hours = add_zero(d.getHours());
var minutes = add_zero(d.getMinutes());
var seconds=add_zero(d.getSeconds());
var ndate = years+"年"+month+"月"+days+"日"+"<br>"+hours+":"+minutes+":"+seconds+" "+week+" ";
var divT=document.getElementById("systimeshow");
divT.innerHTML= ndate;
}
function add_zero(temp)
{
if(temp<10) return "0"+temp;
else return temp;
}
setInterval("getCurDate()",100);
</script>
<div id="zzbuluoled_sx">
<div id="zzbuluoled_sx1" >
<p class="p">
<marquee direction="lelf" scrollamount="5">
<strong>';
foreach ($led_ads_fields as $ledads){
$ledurl=$ledads['ledadsurl'];
$ledtxt=$ledads['ledadstxt'];
$ledcolor=$ledads['ledadstxtcolor'];
$led_ads.='<a href="'.$ledurl.'" target="blank"><span class="txt" style="color:'.$ledcolor.'">'.$ledtxt.' </span></a>';
}
$led_ads.='</strong>
</marquee>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>';
}
return $led_ads;
}
//LED广告结束 zuoxm
inc/options/admin-options.php中加入以下代码(我把该功能和之前的广告管理放在一起,所以代码也是放在广告管理模块中的,如果没用我之前的广告管理代码的请自行修改选项放置的位置,这里就不手把手教了)
array(
'id' =>'ZUOXM_LEDADS_IMG',
'title' =>'LED背景',
'default' => '',
'preview' => true,
'library' => 'image',
'type' => 'upload',
),
array(
'id' =>'ZUOXM_LEDADS_CONTENT',
'type' =>'group',
'button_title'=>'添加LED广告',
'title' =>'LED广告位',
'subtitle' =>'LED文字广告位管理',
'desc' =>'滚动LED广告位项目管理,你可以在此处新增、修改、删除LED广告内容',
'default' =>array(),
'class' => 'compact',
'fields' =>array(
array(
'id' =>'ledadstxt',
'title' =>'广告内容',
'type' =>'text',
'default'=>'上网的蜗牛欢迎您',
),
array(
'id' =>'ledadsurl',
'title' =>'广告文本链接',
'type' =>'text',
'desc' =>'广告文本跳转的链接URL,只需填网址就行,可为空',
'default'=>'https://www.zxmvps.com',
'class' => 'compact',
),
array(
'id' =>'ledadstxtcolor',
'title' => ' ',
'subtitle' => '广告文本颜色',
'type' =>'color',
'class' => 'compact',
'default' => "#002ae8",
),
),
),
然后还要在子比主题根目录的header.php中调用,我放在<body>后面
<?php echo zuoxm_ledads();?>
以上操作完成后即可显示LED广告了,如果后台没有广告内容则不会显示LED屏。