Phiên bản đầy đủ: jsB@nk » Scrollers » Theo chiều đứng » Trình cuộn tin tức
URL: https://www.javascriptbank.com/newsscroller.html
Dùng hiệu ứng JavaScript này để hiển thị tin tức trên trang web của bạn. Tin tức sẽ trượt từ dưới lên và sẽ dừng lại trong một khoảng thời gian ngắn để người dùng đọc rồi mới chuyển sang tin kế tiếp.
Phiên bản đầy đủ: jsB@nk » Scrollers » Theo chiều đứng » Trình cuộn tin tức
URL: https://www.javascriptbank.com/newsscroller.html
<style type="text/css"><!--.newsTxt1 { font-size: .8em; font-family: verdana, helvetica, arial, sans-serif;}.newsTxt2 { font-size: 1em; font-family: verdana, helvetica, arial, sans-serif; font-weight: bold;}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!--// Created by: Robert Suppenbach ::webdevel.deezhosts.netvar toScroll=new Array()var ie=document.allvar dom=document.getElementByIdvar firstNews_obj;var secondNews_obj;function newsScroll(name){ var c=this; c.name=name; c.mc=0; c.i=2; return this;}newsScroll.prototype.addItem = function(text,link,font,fontSize,fontStyle){ var c = this; if (link !=''){ if (font != '') toScroll[c.mc]="<a href='"+link+"'><font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font></a>"; else toScroll[c.mc]="<a href='"+link+"'><font Class='"+fontStyle+"'>"+text+"</font></a>"; } else { if (font != '') toScroll[c.mc]="<font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font>"; else toScroll[c.mc]="<font Class='"+fontStyle+"'>"+text+"</font>"; } c.mc++;}newsScroll.prototype.construct = function(){ var c = this; theWidth = c.scrollerwidth; theHeight=c.scrollerheight; thebgColor = c.scrollerbgcolor; theBackground =c.scrollerbackground; theDelay=c.scrollerdelay; scroll_obj=eval(c.name); if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+theWidth+';height:'+theHeight+';overflow:hidden;background-color:'+thebgColor+' ;background-image:url('+theBackground+')">') document.writeln('<div style="position:absolute;width:'+theWidth+';height:'+theHeight+';clip:rect(0 '+theWidth+' '+theHeight+' 0);left:0;top:0">') document.writeln('<div id="firstNews" style="position:absolute;width:'+theWidth+';left:0;top:1">') document.write(toScroll[0]) document.writeln('</div>') document.writeln('<div id="secondNews" style="position:absolute;width:'+theWidth+';left:0;top:0;visibility:hidden">') document.write(toScroll[dyndetermine=(toScroll.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') }}newsScroll.prototype.move = function(whichdiv){ var c = this; theDelay = c.scrollerdelay; theHeight = c.scrollerheight; scroll_obj=eval(c.name); tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("scroll_obj.move(tdiv)",theDelay) setTimeout("scroll_obj.move2(secondNews_obj)",theDelay) //document.write('Got Milk?') return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("scroll_obj.move(tdiv)",50) } else { tdiv.style.top=parseInt(theHeight)+"px" tdiv.innerHTML=toScroll[c.i] if (c.i==toScroll.length-1) c.i=0 else c.i++ }}newsScroll.prototype.move2 = function(whichdiv){ var c = this; theDelay = c.scrollerdelay; theHeight= c.scrollerheight; scroll_obj=eval(c.name); tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("scroll_obj.move2(tdiv2)",theDelay) setTimeout("scroll_obj.move(firstNews_obj)",theDelay) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("scroll_obj.move2(secondNews_obj)",50) } else { tdiv2.style.top=parseInt(theHeight)+"px" tdiv2.innerHTML=toScroll[c.i] if (c.i==toScroll.length-1) c.i=0 else c.i++ }}newsScroll.prototype.startScroll = function(){ var c = this; scroll_obj=eval(c.name); if (toScroll.length >2) c.i = 2; else c.i = 0; firstNews_obj=ie? firstNews : document.getElementById("firstNews") secondNews_obj=ie? secondNews : document.getElementById("secondNews") setTimeout("scroll_obj.move(firstNews_obj)",c.scrollerDelay); secondNews_obj.style.top=theHeight; secondNews_obj.style.visibility='visible'}--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!-- BegintheNews=new newsScroll("theNews"); //create our newsScroller object theNews.scrollerdelay = 5000; // pausetime 3000 = 3 Seconds theNews.scrollerwidth = 300; // the width of the box theNews.scrollerheight = 100; // the height of the box theNews.scrollerbgcolor = ''; // the box background color theNews.scrollerbackground = ''; // Set to blank if you don't want to use a background image //****************************************************************** // // The addItem method below has 5 variables and is formated as follows: // addItem (text,link,font,fontSize,fontStyle) // text - the text to be displayed. // link - (optional) website, or page to link news item to. // font - (optional) Font face to use on item. // fontSize - (optional) size in pt format // i.e. 1=8pt, 2=10pt, 3=12pt and so on. // fontStyle - (optional) css style to assign to font. You can use the class name. // //****************************************************************** theNews.addItem('Welcome to <em>JavaScript Source</em><br><br>Feel free to use any of the scripts listed here<br>(<em>This item contains a link.</em>)','http://javascriptbank.com','','','newsTxt2'); theNews.addItem('We have scripts for banner ads, graphics, forms, navigation, cookies, and more!','','','','newsTxt1'); theNews.addItem('This scoller can be used to post current news, sales items, or new content. The listings can contain links or can just be text, like this one.','','','',''); theNews.addItem('You can set the speed and size of the scroller box to be used. Add as many items as you like!','','','','newsTxt1'); // the next 2 lines construct the news box, and start the scroller theNews.construct(); theNews.startScroll();// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->