模仿动画的放大缩小容器

发布时间：2008-05-13　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

放大缩小容器仿动画首先要兼容IE\FF滴然后有一个环境与条件：必须是使用em单位布局。因为这个是利用字号做缩放效果，并且兼容fontSize各项单位，例如px、cm、pt等。

其次说说目的：
瞎玩，纯粹为了学习JS练习作。
呃，最后PS：偷偷借鉴了某人写的一个函数：返回最终样式函数。

<!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,个人主页,无聊,神经,懒惰" /> 
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." /> 
<meta name="Author" content="PRcss,qq:50198763" /> 
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" /> 
 
<title>放大缩小容器：仿动画 - www.jb51.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>

<h2>标题</h2> 
    <p style="TEXT-INDENT: 2em">测试鼠标滑动效果</p> 
 
 
    <h2>标题</h2> 
    <p style="TEXT-INDENT: 2em">测试鼠标滑动效果</p> 
 
 
    <h2>标题</h2> 
    <p style="TEXT-INDENT: 2em">测试鼠标滑动效果</p> 
 
 
    <h2>标题</h2> 
    <p style="TEXT-INDENT: 2em">测试鼠标滑动效果</p> 
 
</body> 
 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

下一篇：javascript用层模拟可移动的小窗口

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

模仿动画的放大缩小容器

相关推荐

文章分类

热门关键词

热门文章

最新更新