JavaScript实现鼠标触发容器放大缩小动画效果

发布时间：2018-08-28 23:29:07 所属栏目：模式来源：站长网

导读：烈火网(LieHuo.Net)教程 Java Script仿Flash动画放大/缩小Div容器,兼容IE和DOM，设置参数：元素对象、样式特性等,可重复使用,每个容器可以自定义大小，效果也是挺常用的。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xh

　　烈火网(LieHuo.Net)教程 JavaScript仿Flash动画放大/缩小Div容器,兼容IE和DOM，设置参数：元素对象、样式特性等,可重复使用,每个容器可以自定义大小，效果也是挺常用的。

<!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" /> <title>放大缩小容器 - 烈火网LIEHUO.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 id="box1" onmouseover="pr_box('box1',150);" onmouseout="pr_box('box1',100);"> <h2>标题</h2> <p>小容器</p> </div> <div id="box2" onmouseover="pr_box('box2',280);" onmouseout="pr_box('box2',100);"> <h2>标题</h2> <p>大容器</p> </div> </body> </html><br /><center>烈火网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：濮阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!