多年手赚资深者
免费分享各种手赚软件与线报

dux主题添加网站首页滚动公告内容?分享一个方法

dux主题添加网站首页滚动公告内容?手赚线报网以前给大家分享了一个首页添加公告内容的方法,不过那公告内容不能滚动,总感觉缺了点什么,然后自己瞎琢磨了很久,去网上找了很多的教程,但解决起来的依然不怎么完美,但是今天找到了一个较为完美的方法。

dux主题添加网站首页滚动公告内容?分享一个方法

这种方法只需要两步就可以实现滚动内容了,此次对主题的修改操作主要涉及 index.php以及css文件夹中的main.css,在主题修改之前还是提醒大家备份一下相关文件以防误操作引起的网站崩溃。

大家使用这种方法之前,可以看看我以前给大家分享的另一个版本《dux主题如何增加网站首页公告内容?完整版攻略》,看看哪一种更适合自己。

添加前端显示

大家把下面的代码添加到你想要显示的位置也就是主题的 index.php 文件中合适的位置处即可,我这里添加到了<div class=”content”>之后了,具体位置大家依据自己喜欢而定。

<div id="xinxiaoxi">
  <div class="container">
   <div id="xinxiaoxi_left1"> <i class="fa fa-volume-up fa-lg" aria-hidden="true" ></i> 最新公告</div>
   <div id="demo" class="xinxiaoxi_left">
     <div class="qimo">
       <div id="demo1">
        <ul>
         <li><a href="https://www.wszqz.com/" se_prerender_url="loading">手赚线报网 | 免费分享手机赚钱软件与手机赚钱线报的平台!!</a></li></ul>
       </div>
       <div id="demo2">
        <ul>
         <li><a href="https://www.wszqz.com/">手赚线报网 | 免费分享手机赚钱软件与手机赚钱线报的平台!!</a></li></ul>
       </div>
     </div>
   </div>
   <script type="text/javascript">
     var demo = document.getElementById("demo");
     var demo1 = document.getElementById("demo1");
     var demo2 = document.getElementById("demo2");
     demo2.innerHTML=document.getElementById("demo1").innerHTML;
     function Marquee(){
       if(demo.scrollLeft-demo2.offsetWidth>=0){
        demo.scrollLeft-=demo1.offsetWidth;
      }
      else{
        demo.scrollLeft++;
      }
    }
    var myvar=setInterval(Marquee,30);
    demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
    demo.onmouseover=function(){clearInterval(myvar);}
  </script>
</div>  
</div>

代码的主要作用是前端显示,大家只要把里面的链接和文字替换成需要的即可。

添加CSS样式

最后我们只需要添加如下样式至 main.css 文件中即可:

/*首页滚动公告*/
#xinxiaoxi{background:#ffdada08;list-style: none;height:35px; margin-top:0px; width:100%;font-size:15px;overflow:hidden;}
#xinxiaoxi #xinxiaoxi_left1{float:left;line-height:35px;width:100px;color:#ff6666;font-weight:900;}
#xinxiaoxi #xinxiaoxi_left{float:left;line-height:35px;width:600px;padding-left:10px; }
.xinxiaoxi_left{ float:left;overflow:hidden; width:80%;margin-right:20px;}
.xinxiaoxi_left .qimo {width:8000%; height:35px;}
.xinxiaoxi_left .qimo div{ float:left;}
.xinxiaoxi_left .qimo ul{float:left; height:35px; overflow:hidden; zoom:1;background:#f6f6f6;width:auto;  }
.xinxiaoxi_left .qimo ul li{float:left; line-height:35px;font-weight:100; list-style:none;width:auto;border-right:0px solid #F39BBE;margin-right:30px;}
.xinxiaoxi_left .qimo ul li a{width:auto;display: block; font-size:15px;color:#1E90FF;background:#f6f6f6;}
.xinxiaoxi_left .qimo ul li a:hover{width:98%;display: block; font-size:13px;color:#e23a0a;background:#fff9da;}

#xinxiaoxi #xinxiaoxi_right{float:right;line-height:35px;height:35px;width:200px; background:url(imagesortcodej-02.gif) no-repeat 0;padding-left:30px;overflow:hidden;}
#xinxiaoxi_right a{display: block; font-size:13px;color:#0033CC;float:left;margin-right:10px;}
#xinxiaoxi_right a:hover{display: block; font-size:13px;color:#660099;}

添加滚动公告的好处多多,尤其是对于我们手赚站或者线报站之类的网站来说,只有有新出比较好的APP大家就可以使用公告来提醒大家!

最后要说:如果大家觉得上面的代码对大家有帮助,大家不妨给手赚线报网一个小小的赞就行了!文章到此就要结束了,感谢大家的耐心阅读!

赞(1) 打赏
未经允许不得转载:手赚线报网 » dux主题添加网站首页滚动公告内容?分享一个方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用支付宝就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏