当前位置：网站首页>[native JS] optimized text rotation effect

[native JS] optimized text rotation effect

2022-07-04 15:41:00 【dongZhenSong】

2020 The old project in the new company （JS） There is a need to develop text rotation , I found many schemes on the Internet , There are always some details that are flawed . Studied for half a day , Finally, a set of personal satisfaction native JS Text rotation effect .
The effect is as follows （ Briefly ： Infinite rotation , Silky switch ）：
Insert picture description here

Insert picture description here 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title> Optimized text rotation </title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <style type="text/css"> #rolling_noti{
       width: 100%; height: 45px; background: #FCFE7B; display: flex; } .box{
       -webkit-flex: 1; flex: 1; } #right_div{
       display: inline-block; background: url("source/close.jpeg") no-repeat right; padding-right: 36px; line-height: 36px; } .winBox{
       font-family: PingFangSC-Regular; font-size: 14px; color: #FF721F; letter-spacing: 0; text-align: left; height: 40px; overflow: hidden; position: relative; } /* Solve the last problem under Android models li Line breaking questions ,ul Set not to wrap ,li Set up display:inline-block*/ #scroll_loudspeaker{
       /* Be careful ：width The true value of is determined by the internal li The length and quantity of .*/ width: 900px; position: absolute; left: 0; top: 0; white-space: nowrap; margin: 0; } #scroll_loudspeaker li{
       list-style: none; display: inline-block; line-height: 40px; text-align: left; overflow: hidden; text-decoration: none; } #rolling_noti span{
       display: inline-block; width: 25px; height: 25px; } .content_li{
       background-color: blue; } .li_div{
       background: url("source/loudspeaker.jpeg") no-repeat left; padding-left: 36px; line-height: 36px; } </style>
</head>
<body>

<div id="rolling_noti">
    <div id="rolling_div" style="-webkit-flex: 1;flex: 1;height: 100%;overflow: hidden;text-overflow: ellipsis; -webkit-align-items: center;align-items: center;display: flex;white-space: nowrap">
        <div class="box">
            <div class="winBox">
                <ul id="scroll_loudspeaker">
                    fklsjfald
                </ul>
            </div>
        </div>
    </div>
    <div id="right_div" style=""></div>
</div>

<script type="text/javascript"> var ulAnimateLeft = 0; function clearRollingNotiTimer(){
       } $("#scroll_loudspeaker").html(" In the initialization ..."); var _this = this; let noticeTips = [' Zhang San   Win. 1000 element '," Li Si   Win. 300 element "," Wang Wu   Win. 870 element "]; let noticeLength = noticeTips.length; var lis = ""; for (var i = 0; i < noticeLength; i++) {
       lis+= ( "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[i]+'</strong></div>' ) ; } //  Infinite round robin optimization ： Add a... To the last face li, present A-B-C-D-A In the form of ,D After playing, go to A if (noticeLength > 0) {
       lis+= ( "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[0]+'</strong></div>' ) ; } $('#scroll_loudspeaker').html(lis); clearRollingNotiTimer(); let singleWidth = screen.width-50; // ABCD The length of the content  let infoUlLength = singleWidth * noticeLength; // ABCDA The length of the content  let ulLength = infoUlLength + singleWidth; //  Set dynamic ul length  $('#scroll_loudspeaker').css('width',ulLength+'px'); $('.content_li').css('width',singleWidth+'px'); console.warn("a,b",singleWidth,infoUlLength); //  Note that pages should be destroyed when they die timer, Reinitialize when entering the page  var timer = setInterval(function () {
       //  Play to the last time , Turn to the first  if(ulAnimateLeft== -infoUlLength){
       ulAnimateLeft = 0; } ulAnimateLeft-=1; console.info("ulAnimateLeft:",ulAnimateLeft); $('#scroll_loudspeaker').css({
       left:ulAnimateLeft }) }); </script>
</body>
</html>
原网站

版权声明
本文为[dongZhenSong]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202141227151635.html

边栏推荐

猜你喜欢

随机推荐