国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

javascript - 仿彈幕效果遇到的bug

瀏覽:146日期:2023-04-19 15:42:41

問題描述

利用定位寫的仿彈幕效果,一碰到邊緣就出現bug

CSS:

.dmMsg{ position:absolute; display: inline-block; right:0; top:0; color:#fff; font-size: 22px; font-weight: 700; text-align: center; line-height: 1em; z-index: 100;}

JS:

var $temp = $('<span class=’' + msgType + ' ' + moveInType + '’ data-count='+ msg_count +'>' + message + '</span>');$(’.’ + parent).append($temp); $temp.animate({’right’:’100%’ },15000,loop);}function loop(){ $temp.css(’right’,’-400px’); $temp.animate({’right’:’100%’ },15000,loop);}

問題是彈幕只要碰到屏幕左邊文字就折行了:javascript - 仿彈幕效果遇到的bug

但是輸入數字就不會這樣,我沒有給固定寬度,不知道為什么會這樣?javascript - 仿彈幕效果遇到的bug

問題解答

回答1:

這個和瀏覽器處理文本的原理有關,沒有深刨到底層,但是可以近似于這么理解:1、瀏覽器處理的區分標準其實是英文單詞,當遇到多個英文單詞(中間含空格分隔開才算,原因見下文)溢出屏幕時,猜測設計者的初衷是為了便于閱讀,所以瀏覽器會以空格作為分隔標準,對英文字母換行處理(因為瀏覽器認為空格隔開了,這是一個單詞),而長英文字母串,中間無空格,會被判斷為這是一整個單詞所以不會換行。2、輸入中文時,瀏覽器會把每一個中文判斷為一個“單詞”,所以對每一個溢出屏幕的字都進行了換行處理。3、對于數字,瀏覽器識別規則和英文字母一致。

所以綜上,并非是文字和數字有所區別,關鍵應該在于空格。例如你可以測試一下你代碼中的message = '777 777 777',即數字間含空格,會發現就算是數字,瀏覽器也換行了。同理亦可測試message = 'cat cat cat'和'catcatcat'的區別。最后回到white-space: nowrap這個屬性,w3school給出的含義是“文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。”所以也能解釋得通為什么加上之后文字就沒有換行了。

回答2:

css加上white-space: nowrap;

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 美女黄色在线观看 | 成人精品免费视频 | 久久久久久久久久综合情日本 | 欧美日本一道高清二区三区 | 亚洲区精品久久一区二区三区 | 99久久成人国产精品免费 | 欧美国产成人精品一区二区三区 | 国产三级精品三级国产 | 暖暖在线精品日本中文 | 久污| 2021国产精品系列一区二区 | 国产主播第一页 | 亚洲精品成人网久久久久久 | 美女张开腿让男人桶爽免费网站 | 欧美成人a视频 | 美女视频黄的免费视频网页 | 久久精品视频91 | 王朝影院一区二区三区入口 | 成人三级在线观看 | 亚洲六月丁香六月婷婷蜜芽 | 色噜噜狠狠大色综合 | 免费在线视频成人 | 亚洲精品在线网站 | 日韩久久一区二区三区 | 国产视频高清在线 | 美国毛片免费一级 | 亚洲天堂资源网 | 亚洲精品国产综合久久一线 | avtom影院入口永久在线观看 | 国产精品亚洲欧美一级久久精品 | 最新日韩欧美不卡一二三区 | 日本在线观看免费看片 | 成人久久久观看免费毛片 | 色老头久久网 | 欧美色综合高清视频在线 | 欧美黑人巨大最猛性xxxxx | 久久九九精品一区二区 | 日本阿v精品视频在线观看 日本阿v视频在线观看高清 | 国产成人精品三区 | 久久频这里精品99香蕉久 | 青青草原色|