| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS+js放大镜

2008-10-07 07:22:53  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  <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 onmouseover="bigger(this)" onmouseout="normal(this)">Tiger, tiger, burning

  bright,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">In the forest of

  the night,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">What immortal hand

  or eye</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Could frame thy fearful

  symmetry?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">In what distant deeps

  or skies</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Burnt the fire of

  thine eyes?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">On what wings dare

  he aspire?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">What the hand dare

  seize the fire?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">And what shoulder,

  and what art,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Could twist the sinews

  of thy heart?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">When thy heart began

  to beat,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">What dread hand forged

  thy dread feet?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">What the hammer?

  What the chain?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">In what furnace was

  thy brain?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">What the anvil? What

  dread grasp</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Dared its deadly

  terrors clasp?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">When the stars threw

  down their spears</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">And watered heaven

  with their tears,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Did He smile his

  work to see?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Did He who made the

  lamb make thee?</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">Tiger, tiger, on

  the mat,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">You're nothing but

  a pussy cat,</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">But damn your eyes

  and rue the day!</span><br/>

  <span onmouseover="bigger(this)" onmouseout="normal(this)">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>
 
 
 
<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="[url=http://www.samuelwan.com/downloads/com.samuelwan.eidt/fisheyemenu/FisheyeMenuDemo.html]fisheye'http://www.samuelwan.com/downloads/com.samuelwan.eidt/fisheyemenu/FisheyeMenuDemo.html">fisheye[/url] demo</a>, which uses the effect for menus, but is implemented using Flash. Laur at <a href="[url=http://www.grapefruitdesign.com/]Grapefruit'http://www.grapefruitdesign.com/">Grapefruit[/url] Designs</a> pointed to the same technique implemented as a Java applet at <a href="[url=http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml]HCIL'http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml">HCIL[/url], 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="[url=http://xanadu.com/zigzag/fw99/billowing.html]billowing'http://xanadu.com/zigzag/fw99/billowing.html">billowing[/url] 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="[url=http://www.seairth.com/blog]Seairth'http://www.seairth.com/blog">Seairth[/url] 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,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">In the forest of the night,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">What immortal hand or eye</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Could frame thy fearful symmetry?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">In what distant deeps or skies</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Burnt the fire of thine eyes?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">On what wings dare he aspire?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">What the hand dare seize the fire?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">And what shoulder, and what art,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Could twist the sinews of thy heart?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">When thy heart began to beat,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">What dread hand forged thy dread feet?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">What the hammer? What the chain?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">In what furnace was thy brain?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">What the anvil? What dread grasp</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Dared its deadly terrors clasp?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">When the stars threw down their spears</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">And watered heaven with their tears,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Did He smile his work to see?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Did He who made the lamb make thee?</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">Tiger, tiger, on the mat,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">You're nothing but a pussy cat,</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">But damn your eyes and rue the day!</span><br/> <span onmouseover="bigger(this)" onmouseout="normal(this)">I have to clean your litter tray.</span> </p> <p><i>with apologies to William Blake</i></p> <p><a href="[url=http://66.70.191.189/cgi-bin/mt-comments.cgi?entry_id=1971]Comments'http://66.70.191.189/cgi-bin/mt-comments.cgi?entry_id=1971">Comments[/url] appreciated</a></p> </body>
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号 wangchaonetcn
 
  免责声明:本文仅代表作者个人观点,与王朝网络无关。王朝网络登载此文出于传递更多信息之目的,并不意味著赞同其观点或证实其描述,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有