當你看到別人的網頁文字動態效果美美哒,而你卻為不會使用js而遺憾時,不妨看看這篇文章,教你如何只用css即可實現漂亮的文字滑動效果。
1.問題提出:
在一個特定大小的div中,如何讓p標簽內的內容動態滑動。如下面所給的圖片所示
讓實驗室簡介的內容動態的顯現出來。
2.解決方法
使用css的marquee屬性即可實現動態效果。不多說,先給出代碼:
<div class="library_text"> <h3>實驗室簡介</h3> <hr> <marquee style="height: 140px;" scrollamount="2" direction="up" onmouseover=this.stop() onmouseout=this.start()> <center><font face="仿宋" color="#008000" size="4" ></font ></center > <br> <div> <p> 綜合業務網理論及關鍵技術國家重點實驗室於1989年由國家計委批准立項,1991年開始建設。實驗室於1995年10月通過國家驗收,並正式投入開放運行,分別於2002年、2007年和2012年三次通過國家評估。現任實驗室主任高新波教授,學術委員會主任於全院士。實驗室依托於信息與通信工程以及軍隊指揮學兩個國家一級學科,目前主要研究方向包括“通信網絡體系架構及關鍵技術”,“高效信源和信道編碼技術”,“信息傳輸理論與技術”,“信息安全及密碼理論與技術”。</p> </div> </marquee> </div>
感興趣的讀者可以復制代碼,查看一下效果。
3.詳解marquee屬性
align:--對其方式 LEFT,CENTER,RIGHT,TOP,BOTTOM ;
Behavior:--用於設定滾動的方式,主要由三種方式:
behavior="scroll":--表示由一端滾動到另一端;
behavior="slide":--表示由一端快速滑動到另一端,且不再重復;
behavior="alternate": 默認值 --表示在兩端之間來回滾動。
innercode:--設置或獲取位於對象起始和結束標簽內的 code
innerText:--設置或獲取位於對象起始和結束標簽內的文本
scrollLeft:-- 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop: --設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
注意:沒有scrollRigh和scrollDown
scrollDelay-- 設置或獲取字幕滾動的速度
要創建垂直滾動的字幕,請將其 scrollLeft 屬性設定為 0。
要創建水平滾動的字幕,請將其 scrollTop 屬性設定為 0,這將覆蓋任何腳本設置
scrollHeight:-- 獲取對象的滾動高度
scrollAmount:--設置或獲取介於每個字幕繪制序列之間的文本滾動像素數
offsetTop:--獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetLeft:--獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetHeight:--獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度。
setInterval:(表達式,交互時間)則不一樣,它從載入後,每隔指定的時間就執行一次表達式
clearInterval: 使用 setInterval 方法取消先前開始的間隔事件。
onmouseover="this.stop()" onmouseout="this.start() --鼠標響應:即鼠標指向就停,離開繼續.