html+css+div實(shí)現(xiàn)電影結(jié)束效果
我要評(píng)論經(jīng)常我們看電影都會(huì)看到電影結(jié)束后會(huì)出現(xiàn)一段介紹這個(gè)電影的導(dǎo)演、編劇、主演、友情出演等等一些電影信息的滾動(dòng)字幕，那么那個(gè)效果可以用html+css+div實(shí)現(xiàn)。具體實(shí)現(xiàn)代碼如下：
html代碼：
- <div id="movie">
- <div id="movieup"></div><br>
- <marquee direction="up" height=400px;>
- <p>導(dǎo)演：***</p>
- <p>編?。?**</p>
- <p>主演：**** ** *** </p>
- <p>友情出演：*** *** **</p><br> </marquee><br>
- <div id="moviedown"></div><br></div>
滾動(dòng)標(biāo)簽：<marquee>要滾動(dòng)的文字/圖像<img src=””> </marquee>
下面是我對(duì)滾動(dòng)標(biāo)簽中的一些常見(jiàn)屬性的羅列：
滾動(dòng)方向 direction=up/down/left/right （向上/向下/向左/向右）
滾動(dòng)速度 scrollamount=4/5/6 （4/5/6是比較適合大家使用的三個(gè)滾動(dòng)速度）
滾動(dòng)行為 behavior=scroll/slide/alternate（循環(huán)滾動(dòng)/只滾動(dòng)一次/來(lái)回滾動(dòng)）
滾動(dòng)次數(shù) loop=3(循環(huán)三次)
滾動(dòng)延時(shí) scrolldelay=1000(1000毫秒即一秒)
限制滾動(dòng)區(qū)域大小width=”” height="" bgcolor=""（用來(lái)顯示出可以滾動(dòng)的區(qū)域）
停止與滾動(dòng)效果Onmouseover=this.stop() Onmouseout=this.start()
(鼠標(biāo)放上面滾動(dòng)效果停止，鼠標(biāo)離開(kāi)滾動(dòng)繼續(xù))
注：以上都可作為<marquee></marquee>標(biāo)簽對(duì)里的開(kāi)始標(biāo)簽里的屬性添加想要的效果
css：
- #movie
- {
- width:360px;
- height:400px;
- background:url("F:\images\1.jpg");
- border:1px solid #000000;
- text-align:center;
- margin:auto;
- position:relative;
- }
- #movieup
- {
- width:100%;
- height:40px;
- background:#000000;
- position:absolute;
- top:0px;
- }
- #moviedown
- {
- width:100%;
- height:40px;
- background:#000000;
- position:absolute;
- bottombottom:0px;
- }
我本來(lái)把滾動(dòng)效果錄成微視頻準(zhǔn)備給大家看看的，但不知道是沒(méi)這功能還是有點(diǎn)新手上路沒(méi)找到在哪里上傳本地視頻，只能暫時(shí)先上傳靜態(tài)照片了，知道它是向上滾動(dòng)的字幕即可，這只是滾動(dòng)標(biāo)簽的一個(gè)簡(jiǎn)單應(yīng)用，看到該篇隨筆的園友們可以增添更多樣式使它更加豐富多彩。
原文地址：http://www.cnblogs.com/cyn941105/p/5603995.html
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇全面了解html.css溢出。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-29
- 這篇文章主要為大家詳細(xì)介紹了使用HTML5里classList操作CSS類(lèi)的方法，感興趣的小伙伴們可以參考一下2016-06-28
- 下面小編就為大家?guī)?lái)一篇淺談HTML（css基礎(chǔ)樣式）。小編覺(jué)得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-27
- 下面小編就為大家?guī)?lái)一篇HTML (css樣式規(guī)范)必看篇。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-27
- 進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)想要有一個(gè)好看的界面布局我們就得要使用到css樣式，下面小編就為大家介紹DW在html中插入css樣式方法，不會(huì)的朋友可以參考本文，來(lái)看看吧2016-06-22
- 下面小編就為大家?guī)?lái)一篇Html/Css(新手入門(mén)第一篇必看攻略)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-01