示例演示公告通知標題無縫向上滾動,文字段落無縫向上滾動,簡單的wangeditor富文本編輯器,簡單的音樂播放demo


用於工作需求接觸了公告通知標題內容的無縫向上滾動功能以及使用簡單的wang富文本編輯器配置簡單的音樂插件demo。

在寫之前要先引入相應的js,jquery:

首先是通知標題的無縫向上滾動,這個網上很多 自己也試了很多中,下面是自己測試的代碼:

這是樣式以及body里面的示例代碼,接下來是js代碼:

網上有很多中方法,很多都能實現,可以自己測試。

運行效果:

這個只是截取的圖片,真實的是里面的字段會無縫向上滾動,當鼠標焦點移入字段上 ,標題字段便會停止向上運行,鼠標移出,繼續運行!

接下來是內容的無縫向上滾動,可控制滾動速度以及鼠標焦點移入移出事件:

代碼部分:

運行效果為:

正常畫面是這段文本會以一定的速度無縫向上循環運動,鼠標移入文本停止運動,鼠標移出,文本繼續移動!

wang富文本編輯器,這個我用的是wangeditor3富文本編輯器,比起百度富文本編輯器要簡單的很多,這個在官網上都有詳細的說明,具體的一些配置可以從官網上去查看,下面的是我自己以及配置好的wang富文本編輯器,可插入文件和圖片:

代碼部分:

配置部分:

一定要引入相應的js,一些其他的配置可以從官網上去查看自己配置。

運行代碼,網頁顯示為:

當插入圖片時,效果為:

這個自己看官網。

最后時音頻播放器:

代碼很簡單,使用html5的audio標簽:

運行效果:

可播放音樂和下載。

如果要引入多個音樂,哪就要使用文件遍歷,循環輸入。

想要使樣式更好看,可控制上下首,循環隨機哪最好是使用音樂插件,網上有很多中開源的音樂插件,各種各樣的風格看自己喜歡那種,我使用的是Mplayer音樂插件,其中的一些js代碼要根據自己的需要自己改動。需要的話可以自己網上看看一些demo的配置。

此為一些示例的總結。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM