CSS+js放大镜
2008-10-06 19:28:45 来源：WEB开发网核心提示：<head> <title>CSS Fisheye</title> <style type="text/css"> span {font-size: x-small} </style> <script language=&q
<head>
<title>CSS 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>
<h1>CSS Fisheye</h1>
<p>Run 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="fisheye'>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="Grapefruit'>http://www.grapefruitdesign.com/">Grapefruit Designs</a> pointed
to the same technique implemented as a Java applet at <a href="HCIL'>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="billowing'>http://xanadu.com/zigzag/fw99/billowing.html">billowing
and undulating text</a>") in relation to his Xanadu project back in 1999.</p>
<p>My <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="Seairth'>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 >Tiger, tiger, burning
bright,</span><br/>
<span >In the forest of
the night,</span><br/>
<span >What immortal hand
or eye</span><br/>
<span >Could frame thy fearful
symmetry?</span><br/>
<span >In what distant deeps
or skies</span><br/>
<span >Burnt the fire of
thine eyes?</span><br/>
<span >On what wings dare
he aspire?</span><br/>
<span >What the hand dare
seize the fire?</span><br/>
<span >And what shoulder,
and what art,</span><br/>
<span >Could twist the sinews
of thy heart?</span><br/>
<span >When thy heart began
to beat,</span><br/>
<span >What dread hand forged
thy dread feet?</span><br/>
<span >What the hammer?
What the chain?</span><br/>
<span >In what furnace was
thy brain?</span><br/>
<span >What the anvil? What
dread grasp</span><br/>
<span >Dared its deadly
terrors clasp?</span><br/>
<span >When the stars threw
down their spears</span><br/>
<span >And watered heaven
with their tears,</span><br/>
<span >Did He smile his
work to see?</span><br/>
<span >Did He who made the
lamb make thee?</span><br/>
<span >Tiger, tiger, on
the mat,</span><br/>
<span >You're nothing but
a pussy cat,</span><br/>
<span >But damn your eyes
and rue the day!</span><br/>
<span >I have to clean your
litter tray.</span> </p>
<p><i>with apologies to William Blake</i></p>
<p><a href="Comments'>http://66.70.191.189/cgi-bin/mt-comments.cgi?entry_id=1971">Comments
appreciated</a></p>
</body>
<title>CSS 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>
<h1>CSS Fisheye</h1>
<p>Run 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="fisheye'>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="Grapefruit'>http://www.grapefruitdesign.com/">Grapefruit Designs</a> pointed
to the same technique implemented as a Java applet at <a href="HCIL'>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="billowing'>http://xanadu.com/zigzag/fw99/billowing.html">billowing
and undulating text</a>") in relation to his Xanadu project back in 1999.</p>
<p>My <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="Seairth'>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 >Tiger, tiger, burning
bright,</span><br/>
<span >In the forest of
the night,</span><br/>
<span >What immortal hand
or eye</span><br/>
<span >Could frame thy fearful
symmetry?</span><br/>
<span >In what distant deeps
or skies</span><br/>
<span >Burnt the fire of
thine eyes?</span><br/>
<span >On what wings dare
he aspire?</span><br/>
<span >What the hand dare
seize the fire?</span><br/>
<span >And what shoulder,
and what art,</span><br/>
<span >Could twist the sinews
of thy heart?</span><br/>
<span >When thy heart began
to beat,</span><br/>
<span >What dread hand forged
thy dread feet?</span><br/>
<span >What the hammer?
What the chain?</span><br/>
<span >In what furnace was
thy brain?</span><br/>
<span >What the anvil? What
dread grasp</span><br/>
<span >Dared its deadly
terrors clasp?</span><br/>
<span >When the stars threw
down their spears</span><br/>
<span >And watered heaven
with their tears,</span><br/>
<span >Did He smile his
work to see?</span><br/>
<span >Did He who made the
lamb make thee?</span><br/>
<span >Tiger, tiger, on
the mat,</span><br/>
<span >You're nothing but
a pussy cat,</span><br/>
<span >But damn your eyes
and rue the day!</span><br/>
<span >I have to clean your
litter tray.</span> </p>
<p><i>with apologies to William Blake</i></p>
<p><a href="Comments'>http://66.70.191.189/cgi-bin/mt-comments.cgi?entry_id=1971">Comments
appreciated</a></p>
</body>
中查找“CSS+js放大镜”更多相关内容
中查找“CSS+js放大镜”更多相关内容更多精彩
赞助商链接
