文字滚动的代码_html滚动字幕

老牧童 • 2023-10-05 14:45 • 未分类 • 阅读 163

大家好，欢迎来到IT知识分享网。

.offset()返回的是相对于document的位置

.position()返回的是相对于父元素的位置

文字滚动（文字滚屏）小效果：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
#demo{position:relative;width:120px;height:200px;border:1px solid #ececec;font-size:16px;line-height:20px;font-family:'微软雅黑';overflow:hidden;}
#demo11{position:absolute;width:6em;}
</style>
<br><br><br>
<div id="demo">
    <div id="demo11">
    1366****1111
    1366****1111
    1366****1111
    1366****2222
    1366****2222
    1366****2222
    1362****6666
    1362****6666
    1362****6666
    1366****7777
    1366****7777
    1366****7777
    1368****8888
    1368****8888
    1368****8888
    </div>
</div>
<script>
$(function(){
    function mar(){
        //var H = $("#demo11").height()- $("#demo").height() +20;
        var H = $("#demo11").height();
        var top = $("#demo11").position().top;
        top--;
        if(top<(-1*H)){top=$("#demo").height();}
        $("#demo11").css('top',top);
        console.log('H:'+H+'---top:'+top+'---'+$("#demo11").position().top);
    }
    var timer=setInterval(mar,50);
    $("#demo").mouseover(function(){
        clearInterval(timer);
    });
    $("#demo").mouseout(function(){
        timer=setInterval(mar,50);
    });
});
</script>

改写成对象型：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
#demo{position:relative;width:120px;height:200px;border:1px solid #ececec;font-size:16px;line-height:20px;font-family:'微软雅黑';overflow:hidden;}
#demo11{position:absolute;width:6em;}
</style>
<br><br><br>
<div id="demo">
    <div id="demo11">
    1366****1111
    1366****1111
    1366****1111
    1366****2222
    1366****2222
    1366****2222
    1362****6666
    1362****6666
    1362****6666
    1366****7777
    1366****7777
    1366****7777
    1368****8888
    1368****8888
    1368****8888
    </div>
</div>
<script>
$(function(){
var txtMarquee = {
    timer:null,
    _box:null,
    _boxH:null,
    _txt:null,
    _txtH:null,

    init:function(_box,_txt){
        txtMarquee._box = _box;
        txtMarquee._txt = _txt;
        txtMarquee._boxH = _box.height();
        txtMarquee._txtH = _txt.height();
        //txtMarquee._txtH = _txt.height() - _box.height() + 20;

        txtMarquee.timer=setInterval(txtMarquee.mar,50);
        _box.mouseover(function(){
            clearInterval(txtMarquee.timer);
        });
        _box.mouseout(function(){
            txtMarquee.timer=setInterval(txtMarquee.mar,50);
        });
    },
    mar:function(){
        var top = txtMarquee._txt.position().top;
        top--;
        if(top<(-1*txtMarquee._txtH)){top = txtMarquee._boxH;}
        txtMarquee._txt.css('top',top);
        //console.log('H:'+txtMarquee._txtH+',   top:'+top+'   ,  '+$("#demo11").position().top);
    }
}
txtMarquee.init($("#demo"),$("#demo11"));
});
</script>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29534.html

文字滚动的代码_html滚动字幕

相关推荐

发表回复