Ads 468x60px

##EasyReadMore##

07 8月, 2013

[javascript & css]超出規定的字數就滾動顯示

有時候名稱太長之前的做法是超出範圍的用”…”代替

但這樣有時後面的才是關鍵的字串

因此採以滾動顯示來解決

先算出字串長度

使用正規表示法,將需要的字元做取代,這樣所取得的字串長度就是實際需要的長度了

var str = "a測b試c";
str = str.replace(/%[A-F\d]{2}/g, 'U').length;


str存的就是字串長度



只要超過就滾動顯示



以下將滾動語法加入CSS即可



overflow:-webkit-marquee;//指定溢出時滾動。



-webkit-marquee-style:scroll | slide | alternate; //跑馬燈樣式,分三種。scroll,從一端滾動到另一端,內容完全滾入(消失)時重新開始。slide,從一端滾到另一端,內容接觸到另一端後,立馬重新開始。alternate,內容不跑到顯示區域外,在裡面來回碰壁反彈。這裡主要用第一種。



-webkit-marquee-repetition:infinite | number;// 跑馬燈跑的次數,infinite 為無限多次,不結束。或者可以用正整數設置滾動的次數。



-webkit-marquee-direction:up | down | left | right; //跑動的方向,這個要注意結合實際情況,即實際你操作的標籤文本流溢出在哪個方向溢出。



-webkit-marquee-speed:slow | normal | fast;//跑動的速度設置。




 



http://blog.caesarchi.com/2011/07/javascript-count-string-length-by.html



http://www.vcandou.com/post/503

0 意見:

張貼留言

 
Blogger Templates