JS與HTML結(jié)合使用marquee標簽實現(xiàn)無縫滾動效果代碼
最近在做一個前端開發(fā)的項目,需要實現(xiàn)無縫滾動效果,上下左右無縫滾動。下面小編把實現(xiàn)代碼分享到腳本之家平臺,需要的朋友可以參考下,有bug歡迎提出,共同學習進步。
具體代碼如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>一行多列文字循環(huán)滾動帶停頓-</TITLE> <meta name="keywords" content="網(wǎng)頁特效" /> <meta name="description" content="" /> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <style type="text/css"> ul {height:200px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } #announcement { width:300px; height:200px; background:url(img/menu_bg.gif) repeat; overflow: hidden; } #announcement div { border: #e6e6e6 1px solid; padding:0px 10px 0px 10px; overflow-y:hidden; line-height: 24px; height:100px; } #announcement li { font-size: 12px; float: left; list-style-type: none; margin-right: 20px; padding-left: 10px; background: url(img/arrow_right.gif) no-repeat 0px 50%; white-space: nowrap } #announcement a { text-decoration: none; } #announcement a:hover { text-decoration:underline; } </style> </HEAD> <BODY> <DIV id="announcement" onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);"> <DIV id="scrbody"> <ul> <li> <a href="#" target="_blank">jQuery 類似騰訊網(wǎng)的圖片幻燈特效(可自動播放)</a> </li> <li> <a href="#/JS" target="_blank">VB版增強型Windows任務(wù)管理器</a> </li> <li> <a href="#/JS/texiao"target="_blank">JQuery Tip多風格鏈接提示框</a> </li> <li> <a href="#/JS/ad" target="_blank">VC++動態(tài)加載、調(diào)用smtp.dll發(fā)郵件示例</a> </li> <li> <a href="#/html+css" target="_blank">++連連看游戲源碼附外掛</a> </li> <li> <a href="#/" target="_blank">基于API的VB HOOK鉤子攔截程序</a> </li> <li> <a href="#/" target="_blank">VB 操作系統(tǒng)的一些常用小技巧集</a> </li> <li> <a href="#/js" target="_blank">xTree 標準的WEB菜單樹(樹形菜單)</a> </li> </ul> </DIV> </DIV> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var anndelay = 3000; var anncount = 0; var annheight = 24; var annst = 0; function announcementScroll() { if( ! annst) { $('scrbody').innerHTML += '<br style="clear: both" />' + $('scrbody').innerHTML; $('scrbody').scrollTop = 0; if($('scrbody').scrollHeight > annheight * 3) { annst = setTimeout('announcementScroll()', anndelay); } else { $('announcement').onmouseover = $('announcement').onmouseout = null; } return; } if(anncount == annheight) { if($('scrbody').scrollHeight - annheight <= $('scrbody').scrollTop) { $('scrbody').scrollTop = $('scrbody').scrollHeight / 2 - annheight; } anncount = 0; annst = setTimeout('announcementScroll()', anndelay); } else { $('scrbody').scrollTop ++ ; anncount ++ ; annst = setTimeout('announcementScroll()', 10); } } announcementScroll(); </script> </BODY> </HTML>
以上所述是小編給大家介紹的JS與HTML結(jié)合使用marquee標簽實現(xiàn)無縫滾動效果代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JQuery插件Marquee.js實現(xiàn)無縫滾動效果
- div+css+js實現(xiàn)無縫滾動類似marquee無縫滾動兼容firefox
- 分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼
- js實現(xiàn)的類marquee水平循環(huán)滾動
- javascript 模擬Marquee文字向左均勻滾動代碼
- Class Of Marquee Scroll通用不間斷滾動JS封裝類
- 用javascript實現(xiàn)代替marquee的滾動字幕效果代碼
- 用javascript代替marquee的滾動字幕效果代碼
- 再次更新!MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類 Ver 1.6)
- JS實現(xiàn)無縫循環(huán)marquee滾動效果
相關(guān)文章
在javascript中隨機數(shù) math random如何生成指定范圍數(shù)值的隨機數(shù)
本篇文章給大家介紹在javascript中隨機數(shù)math random如何生成指定范圍數(shù)值的隨機數(shù),由于math.random生成了一個偽隨機數(shù),之后還要經(jīng)過我們的后期處理。對隨機數(shù)math random感興趣的朋友一起了解了解吧2015-10-10使用 JScript 創(chuàng)建 .exe 或 .dll 文件的方法
JScript 是由微軟開發(fā)的活動腳本語言,基于 ECMAScript 規(guī)范實現(xiàn)。Internet Explorer 中的 JavaScript,實際上是指 JScript。2011-07-07javascript 動態(tài)修改樣式和層疊樣式表代碼
javascript 動態(tài)修改樣式和層疊樣式表代碼,需要的朋友可以參考下。2010-04-04