• 类别：codes
• 日期：2020-06-25
• 浏览：2307
• 评论：0

    很多时候网站的公告是必不可少的元素之一，在这里我分享两个网站公告代码实例，一个是基于ID定位的，一个是基于CLASS定位的，首先是公告HTML代码格式，如下

<li class="notice" id="notice">
 <ul>
  <li><a href="#" target="_blank" rel="noopener">test</a></li>
  <li><a href="#" target="_blank" rel="noopener">test</a></li>
  <li><a href="#" target="_blank" rel="noopener">test</a></li>
  <li><a href="#" target="_blank" rel="noopener">test</a></li>
  <li><a href="#" target="_blank" rel="noopener">test</a></li>
 </ul>
</li>

    除写法之外，可将JS拆分为内外端，一部分放置到HTML源代码中定制，一部分放置到JS引用。以下是例子1，基于CLASS定位

#外部引用
<script>$(function(){setInterval("noticeUp('.notice ul','-35px',500)",5000);});</script>
#内部引用
function noticeUp(obj,top,time) {
 $(obj).animate({
 marginTop: top
 }, time, function () {
 $(this).css({marginTop:"0"}).find("li:first").appendTo(this);
 })
};

    以下是例子2，基于ID定位

#外部引用
<script>$(function(){setInterval('autoScroll("#notice")',5000);});</script>
#内部引用
function autoScroll(obj) {
    $('#notice').find("ul").animate({
        marginTop: "-35px"
    },
    800,
    function() {
        $(this).css({
            marginTop: "0px"
        }).find("li:first").appendTo(this)
    })
};

    一上例子均可全部放置到内部引用，但是不可以全部放置到外部引用。