上下滚动播报特效
博客专区 > hming 的博客 > 博客详情
上下滚动播报特效
hming 发表于1年前
上下滚动播报特效
  • 发表于 1年前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

html:

<div style="height:50px;overflow:hidden;font-size: 14px;font-weight: bold;">
    <ul class="line">
        <li style="line-height:25px;">
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报1</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test1</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报2</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test2</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报3</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test3</span>
        </li>
    </ul>
</div>

script:

<script>
    $(function(){
        var _wrap=$('ul.line');
        var _interval=2000;
        var _moving;
        _wrap.hover(function(){
            clearInterval(_moving);
        },function(){
            _moving=setInterval(function(){
                var _field=_wrap.find('li:first');
                var _h=_field.height();
                _field.animate({marginTop:-_h+'px'},600,function(){
                    _field.css('marginTop',0).appendTo(_wrap);
                })
            },_interval);
        }).trigger('mouseleave');
    });
</script>

标签: 滚动 播报 特效
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 3
博文 88
码字总数 86648
×
hming
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: