Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 485963
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
鼠标经过放大zoom

分类： Web开发

2015-03-02 13:49:59


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  2. <html>
  3. <head>
  4. <title>www</title>
  5. <style type="text/css">
  6.  
  7. #menu {
  8.     padding: 10px;
  9.     height: 300px;
  10.     width: 400px;
  11.     background:#bfbfbf
  12. }
  13.  
  14. </style>
  15. <script type="text/javascript">
  16. var P,T;
  17. var over = -1;
  18. var fontSize = 38;
  19. var lensFX = 1;
  20. var num = true;
  21. var color = "#FFF";
  22. var selected = "#F80";
  23. function zoom(s){
  24.     if(s!=over){
  25.         over = s;
  26.         for(var i=0;i<T;i++){
  27.             P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
  28.             P[i].style.color=(i==s)?selected:color;
  29.         }
  30.     }
  31. }
  32. onload = function(){
  33.     P = document.getElementById("menu").getElementsByTagName("div");
  34.     T = P.length;
  35.     for (var i=0;i<T;i++){
  36.     if(num){
  37.         x=i+".";
  38.         if(x.length<3)x="0"+x;
  39.         P[i].innerHTML = x+P[i].innerHTML;
  40.     }
  41.     P[i].style.width = "100%";
  42.     P[i].onmouseover=new Function("zoom("+i+");");
  43. }
  44.     zoom(0);
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <div id="menu">
  50. <div>scripting</div>
  51. <div>scripting2</div>
  52. </div>
  53. </body>
  54. </html>

阅读(849) | 评论(0) | 转发(0) |
0

上一篇：在线图片压缩工具

下一篇：JS实现鼠标经过图片局部放大显示

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6