Lessons IX : [Javascript] Phóng to thu nhỏ chữ tự động

[Javascript] Phóng to thu nhỏ chữ tự động

Thứ bảy, 06 Tháng 9 2008 00:53 ITVnn.net Hướng dẫn lập trình Ajax-JavaScript
Email In

Đoạn Code Javascript dưới đây sẽ giúp bạn tạo một loạt những câu hoặc từ tự động từ nhỏ phóng to trên màn hình. Đoạn này thích hợp cho việc quảng cáo hoặc tạo ấn tượng cho Website của bạn.
Bạn có thể thay đổi kiểu hiển thị của Font chữ, tốc độ và kích cỡ của chữ…Nếu muốn dòng chữ cuối không biến mất mà nằm nguyên trên màn hình bạn thay giá trị var hide=true bằng var hide=false

<script language="JavaScript">
text=new Array('Chào mừng các bạn ','Xin giới thiệu','Tin học như cơm bình dân','Xin cảm ơn')

var numText=4

color=new Array('#000099','#0066ff','#00ccff','#00ffff','#ccffff')
var numColors=5
   var endSize=52
   var Zspeed=200
   var Cspeed=250
   var font='Arial, Helvetica'
   var hide=true

var size=10

var gonum=0
if (document.all) {

      n=0
      ie=1
      zoomText='document.all.zoom.innerText=text[num]'

      zoomSize='document.all.zoom.style.fontSize=size'

      closeIt=""
      fadeColor="document.all.zoom.style.color=color[num]"
   }
if (document.layers) {
      n=1;ie=0
      zoomText=""
      zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
      closeIt="document.zoom.document.close()"
      fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"
   }

function zoom(num,fn){
   if (size<endSize){
      eval(zoomText)
      eval(zoomSize)
      eval(closeIt)
      size+=5;
      setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
   }else{
       eval(fn);
   }
}
function fadeIt(num){
   if (num<numColors){
      eval(fadeColor)
      eval(closeIt)
      num+=1;
      setTimeout("fadeIt("+num+")",Cspeed)
   }else{
      hideIt()
   }
}

function hideIt(){
   if(hide){
      if(ie)document.all.zoom.style.visibility="hidden"
      if(n)document.layers.zoom.visibility="hidden"
   }
}

function init(){
   if(ie){
      document.all.zoom.style.color=color[0]
      document.all.zoom.style.fontFamily=font}
   go(0)   
}

function go(num){

   gonum+=1
   size=10
   if(num<numText){
      zoom(num,'go('+gonum+')')
   }else{
   fadeIt(0)
   }
}

</script>
<body onload="init()">
<div id="zoom" align="center" style="position:absolute; top:150"> </div>

Chú ý rằng đoạn code trên chỉ làm việc trong IE hoặc những trình duyệt based-IE, không hoạt động với Firefox hay Google Chrome

Theo ITVnn.net

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: