HIỆU ỨNG JAVA SCRIPT LÀM HÌNH ẢNH MỜ ẢO

Deathknight · 17 Tháng mười 2003

HIỆU ỨNG JAVA SCRIPT LÀM HÌNH ẢNH MỜ ẢO

<html>
<head>
<script>
function startEQ()
{
richter=5
parent.moveBy(0,richter)
parent.moveBy(0,-richter)
parent.moveBy(richter,0)
parent.moveBy(-richter,0)
timer=setTimeout("startEQ()",10)
}

function stopEQ()
{
clearTimeout(timer)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Xuat cuoc">
<br /><br />
<input type="button" onclick="stopEQ()" value="Thau cuoc">
</form>
</body>
</html>

Khi chạy, màn hình chỉ xuất hiện hai nút rất đơn giản: Xuất cước và thâu cước, nếu có gan bạn nhấn thử xem! Nhưng nhớ chạy xa vài mét kẻo không máy bị “mát” phát cước tùm lum trúng phải thì khổ.

HÌNH ẢNH MỜ ẢO

Chắc bạn đã từng nghe hai câu thơ của thi nhân họ Hàn:

“Ở đây sương khói mờ nhân ảnh
Ai biết tình ai có đậm đà”

Nhưng đối với tôi thì không cần sương cũng chẳng cần có khói gì ráo, chỉ cần một chiêu Java Script thôi là nàng của tôi cũng sẽ mờ mờ ảo ảo. Không tin, bạn hãy chịu khó nhập khoảng hơn 100 dòng lệnh sau đây:

<HTML>
<HEAD>
<TITLE>Chieu </TITLE>
<script LANGUAGE = "JavaScript">
var strengthIndex = 1;
var blurDirection = 0;
var upDown = 0;
var timer;
function reBlur()
{
blurImage.filters( "blur" ).direction =
document.forms( "myForm" ).Direction.value;
blurImage.filters( "blur" ).strength =
document.forms( "myForm" ).Strength.value;
blurImage.filters( "blur" ).add =
document.forms( "myForm" ).Add.checked;
}
function startDemo()
{
timer = window.setInterval( "runDemo()", 5 );
}

function runDemo( )
{
document.forms( "myForm" ).Strength.value = strengthIndex;
document.forms( "myForm" ).Direction.value =
( blurDirection % 360 );
if( strengthIndex == 35 || strengthIndex == 0 )
upDown =!upDown;
blurImage.filters( "blur" ).strength =
( upDown? strengthIndex++: strengthIndex-- );
if ( strengthIndex == 0 )
blurImage.filters( "blur" ).direction =
( ( blurDirection += 45 ) % 360 );
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME = "myForm">
<TABLE BORDER = "1" STYLE = "background-color: #CCFFCC">
<CAPTION>O DAY SUONG KHOI MO NHAN ANH!</CAPTION>
<TR>
<TD>Kieu mo:</TD>
<TD><SELECT NAME = "Direction">
<OPTION VALUE = "0">above
<OPTION VALUE = "45">above-right
<OPTION VALUE = "90">right
<OPTION VALUE = "135">below-right
<OPTION VALUE = "180">below
<OPTION VALUE = "225">below-left
<OPTION VALUE = "270">left
<OPTION VALUE = "315">above-left
</SELECT></TD>
</TR>
<TR>
<TD>Do mo:</TD>
<TD><INPUT NAME = "Strength" SIZE = "3" MAXLENGTH = "3"
VALUE = "0"></TD>
</TR>

<TR>
<TD>Ban giu lai anh goc?</TD>
<TD><INPUT TYPE = "checkbox" NAME = "Giu lai"></TD>
</TR>
<TR>
<TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button"
VALUE = "Thu chieu" ONCLICK = "reBlur();"></TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "button" VALUE = "Xuat Chieu"
ONCLICK = "startDemo();">
<INPUT TYPE = "button" VALUE = "Thau chieu"
ONCLICK = "window.clearInterval( timer );"></TD>
</TR>
</TABLE>
</FORM>
<DIV ID = "blurImage" STYLE = "position: absolute; top: 0; left: 300; padding: 0; filter:
blur( add = 0, direction = 0, strength = 0 ) background-color: white;">
<IMG ALIGN = "center" SRC = "sharp.jpg">
</DIV>
</BODY>
</HTML>

Deathknight · 17 Tháng mười 2003

Chữ nghĩa đổ hào quang
Bài viết của Bảo Kha trong e-Chíp số 27
Chẳng qua là hù thiên hạ thôi, giống như lúc vận công vậy, xung quanh ta bỗng xuất hiện một luồng hào quang, sáng dần, to dần. Ngó xung quanh không còn ai thì xẹt xuống ! Chiêu này áp dụng cho chữ (text). Nào các hành giả hãy cùng úm ba la với tại hạ nhé. Í quên, mở NotePad cái đã !

Code

<HTML>
<HEAD>
<TITLE>Chieu thu hai: Kim cang ho chu!</TITLE>
<script LANGUAGE = "JavaScript">
var strengthIndex = 1;
var counter = 1;
var upDown = true;
var colorArray = [ "FF0000", "FFFF00", "00FF00",
"00FFFF", "0000FF", "FF00FF" ];

function apply()
{
glowSpan.filters( "glow" ).color =
parseInt( glowColor.value, 16);
glowSpan.filters( "glow" ).strength =
glowStrength.value;
}

function startdemo()
{
window.setInterval( "rundemo()", 150 );
}

function rundemo()
{
if ( upDown )
glowSpan.filters( "glow" ).strength = strengthIndex++;
else
glowSpan.filters( "glow" ).strength = strengthIndex--;

if ( strengthIndex == 1 ) {
upDown = !upDown;
counter++;
glowSpan.filters( "glow" ).color =
parseInt( colorArray[ counter % 6 ], 16 );
}

if ( strengthIndex == 10 ) {
upDown = !upDown;
}
}
</SCRIPT>
</HEAD>

<BODY STYLE = "background-color: #00AAAA">
<SPAN ID = "glowSpan" STYLE = "position: absolute; left: 200; top: 100; padding: 5; filter: glow( color = red, strength = 5 )">
<H2>Úm-ba-la, cà na xí muội!</H2>
</SPAN>

<TABLE BORDER = 1 STYLE = "background-color: #CCFFCC">
<TR>
<TD>Màu (Hex): </TD>
<TD><INPUT ID = "glowColor" TYPE = "text" SIZE = 3 MAXLENGTH = 3 VALUE = FF0000></TD>
</TR>
<TR>
<TD>Độ dày (1-255): </TD>
<TD><INPUT ID = "glowStrength" TYPE = "text" SIZE = 3 MAXLENGTH = 3 VALUE = 5></TD>
</TR>
<TR>
<TD COLSPAN = 2>
<INPUT TYPE = "button" VALUE = "Xuất chiêu" ONCLICK = "apply()">
<INPUT TYPE = "button" VALUE = "Hô biến" ONCLICK = "startdemo()"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Lưu lại nội dung trên vào máy với phần mở rộng là .HTML và nhấp đúp chuột để chạy.
Thay đổi các thông số cho màu và độ dày hợp nhãn mình rồi nhấn nút Xuất chiêu, bạn sẽ thấy trên màn hình có sự biến đổi, nếu thấy hơi chán thì nhấn vào nút Hô biến để xem một màn trình diễn !

Deathknight · 17 Tháng mười 2003

Dùng Javascript để tạo chữ từ nhỏ phóng to ra màn hình
Bài viết của Phạm Mạnh Cường trong e-Chíp số 32
Đ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

Code

<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','#cc
ffff')
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>