【 tulaoshi.com - Web开发 】
head
titleCSS Fisheye/title
style type="text/css"
span {font-size: x-small}
/style
script language="JavaScript" type="text/javascript"
!--
function convertPreBlocks() {}
var regular = "x-small";
function bigger(thing){
thing.style.fontSize = "large";
siblingElement = thing.previousSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = "medium";
break;
}
siblingElement = siblingElement.previousSibling;
}
siblingElement = thing.nextSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = "medium";
break;
}
siblingElement = siblingElement.nextSibling;
}
}
function normal(thing){
thing.style.fontSize = regular;
siblingElement = thing.previousSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = regular;
break;
}
siblingElement = siblingElement.previousSibling;
}
siblingElement = thing.nextSibling;
while(siblingElement) {
if(siblingElement.tagName=="SPAN") {
siblingElement.style.fontSize = regular;
break;
}
siblingElement = siblingElement.nextSibling;
}
}
// --
/script
/head
body
h1CSS Fisheye/h1
pRun your mouse over the text below to see the effect. It's implemented using
CSS and Javascript. I got the idea from this a href="http://www.samuelwan.com/downloads/com.samuelwan.eidt/fisheyemenu/FisheyeMenuDemo.html"fisheye
demo/a, which uses the effect for menus, but is implemented using Flash. Laur
at a href="http://www.grapefruitdesign.com/"Grapefruit Designs/a pointed
to the same technique implemented as a Java applet at a href="http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml"HCIL,
Univ. of Maryland/a, and suggested that the idea had probably been around
since the 1960's. It also seems that Ted Nelson had described this and similar
techniques ("a href="http://xanadu.com/zigzag/fw99/billowing.html"billowing
and undulating text/a") in relation to his Xanadu project back in 1999./p
pMy a href="fisheye-old.html"earlier version/a only worked on Internet Explorer,
but the version here has been fixed for other browsers by a href="http://www.seairth.com/blog"Seairth
Jacobs/a. Also the previous version used a href=... to mark the lines,
the current version uses span i("for no particular reason")/i. /p
p
span onmouseover="bigger(this)" onmouseout="normal(this)"Tiger, tiger, burning
bright,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"In the forest of
the night,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"What immortal hand
or eye/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Could frame thy fearful
symmetry？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"In what distant deeps
or skies/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Burnt the fire of
thine eyes？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"On what wings dare
he aspire？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"What the hand dare
seize the fire？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"And what shoulder,
and what art,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Could twist the sinews
of thy heart？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"When thy heart began
to beat,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"What dread hand forged
thy dread feet？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"What the hammer？
What the chain？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"In what furnace was
thy brain？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"What the anvil？ What
dread grasp/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Dared its deadly
terrors clasp？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"When the stars threw
down their spears/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"And watered heaven
with their tears,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Did He smile his
work to see？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Did He who made the
lamb make thee？/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"Tiger, tiger, on
the mat,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"You're nothing but
a pussy cat,/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"But damn your eyes
and rue the day!/spanbr/
span onmouseover="bigger(this)" onmouseout="normal(this)"I have to clean your
litter tray./span /p
piwith apologies to William Blake/i/p
pa href="http://66.70.191.189/cgi-bin/mt-comments.cgi？entry_id=1971"Comments
appreciated/a/p
/body
资料引用:http://www.knowsky.com/441326.html
