类别:Develop / 日期:2020-06-25 / 浏览:1547 / 评论:0

网站公告代码实例  notice html id class js 公告 代码 第1张

    很多时候网站的公告是必不可少的元素之一,在这里我分享两个网站公告代码实例,一个是基于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)
    })
};

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

赞助

感谢您的打赏~

打开支付宝扫一扫,即可进行扫码打赏哦~

版权声明 : 本文使用「署名-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议 / Article Use Creative Commons Attribution-ShareAlike 4.0 International License「CC BY 4.0」

 可能感兴趣的文章

伤心叹戈

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。

近期评论