`
txf2004
  • 浏览: 6880172 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

放大缩小容器：仿动画

IEJavaScriptCSSHTML 
阅读更多
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <title>放大缩小容器：仿动画</title>
  5. <styletype="text/css">
  6. *{margin:0;padding:0;}
  7. body{padding:1em;}
  8. h2{font-size:2em;}
  9. div{display:inline-block;width:10em;padding:.5em;margin-bottom:1em;overflow:hidden;background:#eee;text-align:center;font-size:1em;}
  10. p#text{position:absolute;right:10px;top:10px;}
  11. </style>
  12. </head>
  13. <body>
  14. <pid="text"></p>
  15. <divid="box1"onmouseover="pr_box('box1',150);"onmouseout="pr_box('box1',100);">
  16. <h2>标题</h2>
  17. <p>测试鼠标滑动效果</p>
  18. </div>
  19. <divid="box2"onmouseover="pr_box('box2',150);"onmouseout="pr_box('box2',100);">
  20. <h2>标题</h2>
  21. <p>测试鼠标滑动效果</p>
  22. </div>
  23. <divid="box3"onmouseover="pr_box('box3',150);"onmouseout="pr_box('box3',100);">
  24. <h2>标题</h2>
  25. <p>测试鼠标滑动效果</p>
  26. </div>
  27. <divid="box4"onmouseover="pr_box('box4',150);"onmouseout="pr_box('box4',100);">
  28. <h2>标题</h2>
  29. <p>测试鼠标滑动效果</p>
  30. </div>
  31. </body>
  32. <scripttype="text/javascript">
  33. functiongetDefaultStyle(obj,attribute){//返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
  34. returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
  35. }
  36. functionpr_box(id,e){
  37. clearInterval(document.getElementById(id).maxmin);
  38. varobj=document.getElementById(id);
  39. varcfont=getDefaultStyle(obj,"fontSize");//得到默认的大小:附单位
  40. varcp=cfont.replace(/[0-9]|[\.]/g,"");//得到默认的单位
  41. varfsize=parseFloat(cfont);//得到默认的大小数值
  42. vars=10;//运动速度
  43. if(!obj.fsizeTmpe){//存储默认大小数值
  44. obj.fsizeTmpe=fsize;
  45. }
  46. if(!objfont){//如果没有设置当前大小，则赋予其默认大小
  47. obj.style.fontSize=cfont;
  48. }
  49. vare=obj.fsizeTmpe*e/100;//需要改变到的大小数值
  50. varobjfont=parseFloat(obj.style.fontSize);//得到当前的大小
  51. if(e<obj.fsizeTmpe){obj.maxmin=setInterval(function(){pr_min(obj,e,cp)},s);}
  52. if(e>obj.fsizeTmpe){obj.maxmin=setInterval(function(){pr_max(obj,e,cp)},s);}
  53. if(e==obj.fsizeTmpe){
  54. if(objfont<obj.fsizeTmpe){
  55. obj.maxmin=setInterval(function(){pr_max(obj,obj.fsizeTmpe,cp)},s);
  56. }
  57. if(objfont>obj.fsizeTmpe){
  58. obj.maxmin=setInterval(function(){pr_min(obj,obj.fsizeTmpe,cp)},s);
  59. }
  60. }
  61. }
  62. functionpr_max(obj,e,cp){
  63. if(!obj.fs){
  64. objobj.fs=obj.style.fontSize;
  65. }
  66. varobjfont=parseFloat(obj.fs);
  67. if(e>objfont){
  68. //document.getElementById("text").innerHTML+="放大-原始值："+objfont+"+递增值："+e/10+"<br/>";
  69. obj.fs=objfont+e/10+cp;
  70. objobj.style.fontSize=obj.fs;
  71. }
  72. elseif(e<objfont){
  73. obj.fs=e+cp;
  74. objobj.style.fontSize=obj.fs;
  75. }
  76. else{clearInterval(obj.maxmin);}
  77. }
  78. functionpr_min(obj,e,cp){
  79. if(!obj.fs){
  80. objobj.fs=obj.style.fontSize;
  81. }
  82. varobjfont=parseFloat(obj.fs);
  83. if(e<objfont){
  84. //document.getElementById("text").innerHTML+="缩小-原始值："+objfont+"-递减值："+e/10+"<br/>";
  85. obj.fs=objfont-e/10+cp;
  86. objobj.style.fontSize=obj.fs;
  87. }
  88. elseif(e>objfont){
  89. obj.fs=e+cp;
  90. objobj.style.fontSize=obj.fs;
  91. }
  92. else{clearInterval(obj.maxmin);}
  93. }
  94. </script>
  95. </html>

http://www.corange.cn/archives/2008/10/1939.html

分享到：
| 利用ASP获得图象的实际尺寸的示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    模仿动画的放大缩小容器

    放大缩小容器：仿动画 – www.jb51.net *{margin:0;padding:0;} body { padding:1em; } h2 { font-size:2em; } div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; ...

    JS 仿Flash动画放大/缩小容器

    放大缩小容器 *{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:...

    css入门笔记

    将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大；直到背景图片碰到某个边缘位置 5.背景图片固定 作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着 ...

    LSDView：用于LSD Dream Emulator的数据文件查看器

    LSD视图用于LSD Dream Emulator的数据文件查看器。用户指南LSDView可以从...MOM（3D网格及其动画的容器）控制项通过单击并拖动，可以旋转3D视图（以Arcball方式） 滚轮可用于放大和缩小用鼠标右键单击并拖动以平移如

    YUI v3.17.2 RC1.zip

    值得关注的功能包括可排序的栏、分页、卷轴、行选取、可放大缩小的栏、以及线上编辑。 纪录器 提供一种快速简单的方式来写入 日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。 ...

    java源码包2

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    JAVA上百实例源码以及开源项目

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    java源码包---java 源码 大量 实例

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    JAVA上百实例源码以及开源项目源代码

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    java源码包3

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    java源码包4

    　在对象创建的过程中将被容器调用，onMessage函数方法接收消息参数，将其强制转型为合适的消息类型，同时打印出消息的内容。同时一个mail note将被发送给消息发送者，发送一个e-mail通知给由recipient参数确定的e-...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB... Java实现的放大...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB... Java实现的放大...

Magicbox
Global site tag (gtag.js) - Google Analytics