快捷導(dǎo)航

模仿動(dòng)畫的放大縮小容器

更新時(shí)間：2008年05月13日 23:22:45 作者：

放大縮小容器仿動(dòng)畫首先要兼容IE\FF滴然后有一個(gè)環(huán)境與條件：必須是使用em單位布局。因?yàn)檫@個(gè)是利用字號(hào)做縮放效果，并且兼容fontSize各項(xiàng)單位，例如px、cm、pt等。

其次說(shuō)說(shuō)目的：
瞎玩，純粹為了學(xué)習(xí)JS練習(xí)作。
呃，最后PS：偷偷借鑒了某人寫的一個(gè)函數(shù)：返回最終樣式函數(shù)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個(gè)人主頁(yè),無(wú)聊,神經(jīng),懶惰" /> <meta name="description" content="PRcss的個(gè)人主頁(yè),無(wú)聊的,神經(jīng)的,懶惰的..." /> <meta name="Author" content="PRcss,qq:50198763" /> <meta name="Copyright" content="本頁(yè)版權(quán)歸PRcss所有。All Rights Reserved" /> <link rel="shortcut icon" href="http://www.pr1984.com/favicon.ico" /> <title>放大縮小容器：仿動(dòng)畫 - www.fzitv.net</title> <style type="text/css"> *{margin:0;padding:0;} body { padding:1em; } h2 { font-size:2em; } div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; background:#eee; text-align:center; font-size:1em; } p#text { position:absolute; right:10px; top:10px; } </style> </head> <body> <p id="text"></p> <div   class="wppm3vysvbp"   id="box1" onmouseover="pr_box('box1',150);" onmouseout="pr_box('box1',100);">     <h2>標(biāo)題</h2>     <p>測(cè)試鼠標(biāo)滑動(dòng)效果</p> </div> <div   class="wppm3vysvbp"   id="box2" onmouseover="pr_box('box2',150);" onmouseout="pr_box('box2',100);">     <h2>標(biāo)題</h2>     <p>測(cè)試鼠標(biāo)滑動(dòng)效果</p> </div> <div   class="wppm3vysvbp"   id="box3" onmouseover="pr_box('box3',150);" onmouseout="pr_box('box3',100);">     <h2>標(biāo)題</h2>     <p>測(cè)試鼠標(biāo)滑動(dòng)效果</p> </div> <div   class="wppm3vysvbp"   id="box4" onmouseover="pr_box('box4',150);" onmouseout="pr_box('box4',100);">     <h2>標(biāo)題</h2>     <p>測(cè)試鼠標(biāo)滑動(dòng)效果</p> </div> </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]