HTML标签marquee实现多种滚动效果
页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - marquee/marquee可以实现多种滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：marquee.../marquee； 说明：在标记之间添加要进行滚动的内容。
重要属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
语法：marquee direction="滚动方向".../marquee
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
语法：marquee behavior="滚动方式".../marquee
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
语法：marquee scrollamount="5".../marquee
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
语法：marquee scrolldelay="100".../marquee
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
语法：marquee loop="2".../marquee
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
JavaScript Code复制内容到剪贴板
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题文档/title /head body div marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10" 指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复... /marquee /div /body /html绛旓細娲诲姩瀛楀箷锛屼篃绉颁负婊氬姩鐪嬫澘銆佹粴鍔ㄥ瓧骞曘傛椿鍔ㄥ瓧骞曠殑浣跨敤浣垮緱鏁翠釜缃戦〉鏇存湁鍔ㄦ劅锛屾樉寰楀緢鏈夌敓姘斻傜幇鍦ㄧ殑缃戠珯涓篃瓒婃潵瓒婂鍦颁娇鐢ㄦ椿鍔ㄥ瓧骞曟潵鍔犲己缃戦〉鐨勪簰鍔ㄦс傜敤Javascript缂栫▼鍙互瀹炵幇娲诲姩瀛楀箷鏁堟灉锛涚敤Dreamweaver鐨勫浘灞傚啀鐢ㄥ叾鏃堕棿绾垮姛鑳藉彲浠ュ仛鍑洪潪甯告紓浜殑婊氬姩鐪嬫澘銆傝岀敤HTML鐨<marquee>娲诲姩瀛楀箷鏍囪鎵闇鐨勪唬鐮佹渶灏戯紝...
绛旓細html涓璵arquee鏍囩璁╁浘鐗囨粴鍔ㄦ槸杩欐牱鍋氱殑锛<marquee onmouseover="this.stop()"onmouseout="this.start()"scrollamount="2"scrolldelay="3"direction="up"></marquee>鍙鎶婂浘鐗囨斁鍦╩arquee涓棿灏卞ソ銆傚叾涓 direction="up"杩欎釜鏄瀭鐩存粴鍔紱锛堣繕鏈変釜down锛塪irection="left"杩欎釜鏄按骞虫粴鍔紙杩樻湁涓猺ight锛塵arquee...
绛旓細鍦ㄨ瀹炵幇婊氬姩鐨勫湴鏂,鍔犲叆姝や唬鐮:<marquee direction=up>瑕佽緭鍏ョ殑鏂囧瓧</marquee> UP鏄悜涓, DOWN鏄悜涓,Left鍚戝乏,Right鍚戝彸.杩欎袱涓睘鎬у喅瀹氭枃瀛楁粴鍔ㄧ殑閫熷害锛坰crollamount锛夊拰寤舵椂锛坰crolldelay锛夛紝鍙傛暟鍊奸兘鏄鏁存暟銆傚涓嬫墍绀猴細<marquee scrollamount="100">鎴戦熷害寰堝揩銆</marquee> <marquee scrollamount=...
绛旓細鏂囧瓧鍚戝乏绉诲姩浠ｇ爜锛<marquee direction=left>闇瑕佺Щ鍔ㄧ殑鏂囧瓧</marquee> marquee锛<marquee>鏍囩锛屾槸鎴愬鍑虹幇鐨勬爣绛撅紝棣栨爣绛<marquee>鍜屽熬鏍囩</marquee>涔嬮棿鐨勫唴瀹瑰氨鏄粴鍔ㄥ唴瀹广<marquee>鏍囩鐨勫睘鎬т富瑕佹湁behavior銆乥gcolor銆乨irection銆亀idth銆乭eight銆乭space銆乿space銆乴oop銆乻crollamount銆乻crolldelay绛夛紝瀹冧滑閮...
绛旓細姝ラ澶ц嚧濡備笅锛1銆佹墦寮Dreamweaver锛屾柊寤轰竴涓┖鐧界殑HTML銆2銆佸垏鎹㈠埌涓婅竟鐨勪唬鐮佸尯銆3銆佹壘鍒<body></body>涔嬪悗锛屽湪杩欎釜鍖哄煙閲岃緭鍏ヤ唬鐮侊細<marquee scrollAmount=2 width=300>XXX</marquee> scrollAmount 鍚庨潰鐨勬暟鍊间唬琛ㄩ熷害锛寃idth鏄搴︼紝XXX鍗虫粴鍔ㄥ瓧骞曠殑鍐呭銆4銆佸彟瀛樻垚HTML鏍煎紡鐨勬枃浠跺嵆鍙傚彟澶栵紝濡傞渶娴忚...
绛旓細<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 姝ゅ杈撳叆婊氬姩鍐呭 </marquee> 鈼 direction琛ㄧず婊氬姩鐨勬柟鍚戯紝鍊煎彲浠ユ槸left锛宺ight锛寀p锛宒own锛岄粯璁...
绛旓細鎴戜滑鍦ㄦ祻瑙堢綉椤电殑鏃跺欙紝鏈夋椂浼氱湅鍒扮綉椤典腑鏈変簺鏂囧瓧浼氬惊鐜線澶嶇殑绉诲姩銆傝繖绉嶅姩鐢绘晥鏋滄槸濡備綍鍒朵綔鐨勫憿锛熻繖閲屾垜浠氨鏉ョ湅涓鐪嬨傚綋鐒舵垜浠彲浠ュ埄鐢╢lash鎴栬呴噰鐢℅if鍔ㄧ敾鏉瀹炵幇锛屼絾鏄繖绉嶆柟寮忓線寰鍗犵敤鐨勭┖闂存瘮杈冨ぇ锛岃屼笖涓嶅HTML鏍囪鏉ュ緱閭ｄ箞绠鍗曘傝繖涓爣璁板氨鏄Marquee鏍囪锛屼腑鏂囩炕璇戜负鈥滆窇椹伅鈥濄侷E3.0浠ヤ笂鐗堟湰鐨勬祻瑙堝櫒...
绛旓細鏂规涓锛氱洿鎺ヤ娇鐢HTML鐨婊氬姩鏍囩 marquee 锛屾妸鍥剧墖鏀惧叆婊氭粴鏍囩鍐呴儴锛屼唬鐮佸涓嬶細<marquee> <img src='1.jpg'> <img src='2.jpg'> <img src='3.jpg'> <img src='4.jpg'> </marquee> 鏂规浜岋細浣跨敤绗笁鏂规彃浠讹紝姣斿swiper.js锛屾彃浠
绛旓細<marquee behavior="scroll" direction=up width="瀹" height="楂" scrollamount="5" onmouseout="this.start()"><img src="鍥剧墖缃戝潃 "><img src="鍥剧墖缃戝潃 ">路路路</marquee> 甯︽湁瓒呴摼鎺ョ殑鍥剧墖瀹炵幇婊氬姩鏁堟灉 <marquee behavior="scroll" direction=up width="120" height="60" scrollamount=...
绛旓細1銆侀鍏堟壘鍒扮數鑴戦噷闈㈢殑dreamweaver銆2銆佸弻鍑绘墦寮杞欢dreamweaver锛屽苟涓旀柊寤轰竴涓┖鐧界殑HTML銆3銆佺劧鍚庡垏鎹笂杈圭殑浠ｇ爜鍖哄煙銆4銆佺劧鍚庢壘鍒<body></body>锛岃鍦ㄨ繖鍖哄煙杈撳叆浠ｇ爜銆5銆佽緭鍏<marquee scrollAmount=2 width=300>鐧惧害缁忛獙</marquee> 銆6銆佺劧鍚庡彟瀛樻垚HTML鏍煎紡鐨勬枃浠躲7銆佺劧鍚庢祻瑙堜竴涓嬶紝蹇嵎閿槸F12锛...
