CSS+js放大镜

以泪融妆

以泪融妆

2016-02-19 20:21

今天给大家分享的是由图老师小编精心为您推荐的CSS+js放大镜,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!
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
展开更多 50%)
分享

猜你喜欢

CSS+js放大镜

Web开发
CSS+js放大镜

WPS放大镜效果

电脑入门
WPS放大镜效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

360图片放大镜怎么开?

浏览器
360图片放大镜怎么开?

制作精美矢量风格放大镜

PS PS基础 ps平面设计教程 ps去水印教程
制作精美矢量风格放大镜

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS制作精致的放大镜

PS PS基础 ps平面设计教程 ps去水印教程
PS制作精致的放大镜

360图片放大镜怎么关闭

浏览器
360图片放大镜怎么关闭

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

对C++递增(增量)运算符重载的思考

对C++递增(增量)运算符重载的思考

比较有意义的QQ分组_错个了那个真诚相待

比较有意义的QQ分组_错个了那个真诚相待
下拉加载更多内容 ↓