这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
相信本菜单会让你学习到一些新鲜的 JS 技巧。
原生 JS 仿苹果任务栏菜单,具备图标放大效果的菜单,原生 JavaScript 自定的特效,鼠标放到菜单上就把图标放大了,类似使用了 jQuery 的效果,里面用到了几张菜单图片,这个那就自己下载吧。
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- JS仿苹果任务栏菜单
- </title>
- <style type="text/CSS">
- body{margin:0;padding:0} #menu{position:absolute;width:100%;bottom:0;text-align:center;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oMenu = document.getElementById("menu");
- var aImg = oMenu.getElementsByTagName("img");
- var aWidth = [];
- var i = 0;
- for (i = 0; i < aImg.length; i++) {
- aWidth.push(aImg[i].offsetWidth);
- aImg[i].width = parseInt(aImg[i].offsetWidth / 2)
- }
- document.onmousemove = function(event) {
- var event = event || window.event;
- for (i = 0; i < aImg.length; i++) {
- var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
- var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
- var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
- if (iScale < 0.5) iScale = 0.5;
- aImg[i].width = aWidth[i] * iScale
- }
- };
- };
- </script>
- </head>
- <body>
- <div>
- <img class="img-responsive" src="/jscss/demoimg/201108/1.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/2.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/3.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/4.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/5.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/6.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/7.png" data-src=""
- />
- <img class="img-responsive" src="/jscss/demoimg/201108/8.png" data-src=""
- />
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0625/282836.html