1+ <!doctype html>
2+ < html >
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0 "/>
6+ < meta name ="format-detection " content ="telephone=no,email=no,date=no,address=no ">
7+ < title > js实现文字超过显示宽度每间隔1s自动向左滚动显示</ title >
8+ < style type ="text/css ">
9+
10+
11+ .broad-coast {
12+ display : flex;
13+ justify-content : center;
14+ }
15+ .icon-cost {
16+ width : 40px ;
17+ height : 40px ;
18+ background : url(./ v_3.png) no-repeat center center;
19+ background-size : 20px 20px ;
20+ }
21+ .broad {
22+ position : relative;
23+ width : 300px ;
24+ font-size : 0.85rem ;
25+ color : # 333
26+ white-space : nowrap;
27+ overflow : hidden;
28+ }
29+ .inner { width : 1000px ;height : 40px ;line-height : 40px ;overflow : hidden;}
30+ .inner .txt { display : inline-block;}
31+
32+ </ style >
33+ </ head >
34+ < body >
35+ < div id ="marquee " class ="broad-coast ">
36+ < div class ="icon-cost "> </ div >
37+ < div id ="broad " class ="broad ">
38+ < div class ="inner ">
39+ < span class ="txt "> 文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</ span >
40+ </ div >
41+ </ div >
42+ </ div >
43+
44+ < script >
45+ /**
46+ * 文字跑马灯
47+ * @params options <Object>
48+ * id: 跑马灯所在的dom树最外层节点
49+ * broadName 包围圈样式名
50+ * speed 速度值 默认50
51+ 52+ */
53+ function Marquee ( options ) {
54+ if ( ! options . id ) {
55+ alert ( '缺少id' )
56+ return false ;
57+ }
58+ var wrapper = this . wrapper = document . getElementById ( options . id ) ;
59+ this . extend ( options ) ;
60+ this . broad = wrapper . querySelector ( options . broadName ) ;
61+ this . inner = this . broad . querySelector ( options . innerName ) ;
62+ this . text = this . inner . querySelector ( options . textName ) ;
63+ this . textWidth = this . text . offsetWidth ;
64+ this . broadWidth = this . broad . width ;
65+ this . speed = options . speed ;
66+ this . init ( ) ;
67+ }
68+ /**
69+ * 初始化
70+ */
71+ Marquee . prototype . init = function ( ) {
72+ var that = this ;
73+ if ( this . broadWidth > this . textWidth ) {
74+ return false ;
75+ }
76+ this . inner . innerHTML += this . inner . innerHTML ;
77+ setTimeout ( function ( ) {
78+ that . run ( )
79+ } , 2000 )
80+ }
81+
82+ /**
83+ * 执行跑马灯
84+ */
85+ Marquee . prototype . run = function ( ) {
86+ var that = this ;
87+ if ( this . textWidth > this . broad . scrollLeft ) {
88+ this . broad . scrollLeft ++ ;
89+ setTimeout ( function ( ) {
90+ that . run ( ) ;
91+ } , this . speed ) ;
92+ } else {
93+ setTimeout ( function ( ) {
94+ that . reset ( ) ;
95+ } , this . speed ) ;
96+ }
97+ }
98+
99+ /**
100+ * 复位
101+ */
102+ Marquee . prototype . reset = function ( ) {
103+ this . broad . scrollLeft = 0 ;
104+ this . run ( ) ;
105+ }
106+
107+ /**
108+ * 设置默认参数
109+ */
110+ Marquee . prototype . extend = function ( options ) {
111+ var defaultConfig = {
112+ broadName :'.broad' ,
113+ innerName :'.inner' ,
114+ textName :'.txt' ,
115+ speed :50
116+ }
117+ for ( var key in defaultConfig ) {
118+ if ( ! options . hasOwnProperty ( key ) ) {
119+ options [ key ] = defaultConfig [ key ]
120+ }
121+ }
122+ return options ;
123+ }
124+
125+ var m = new Marquee ( {
126+ id :'marquee'
127+ } )
128+
129+
130+ </ script >
131+ </ body >
132+ </ html >
0 commit comments