这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要分享了 js 实现带简单弹性运动导航条的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
晚上跟着视频敲了下 弹性菜单的代码,先记下来
效果如下:
代码如下:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .ul1{
- width:450px;
- height:30px;
- margin:20px auto;
- position:relative;
- }
- li{
- list-style:none;
- line-height:30px;
- height:30px;
- width:100px;
- color:orange;
- text-align:center;
- float:left;
- margin-right:5px;
- border:1px soli #000;
- background-color:red;
- }
- .mark{
- position:absolute;
- left:0;
- top:0;
- overflow:hidden;
- }
- .mark ul{
- width:450px;
- position:absolute;
- left:0;
- top:0;
- }
- .mark ul li{
- color:#fff;
- background-color:deepskyblue;
- }
- </style>
- </head>
- <body>
- <ul class="ul1">
- <li class="mark">
- <ul>
- <li>首页</li>
- <li>论坛</li>
- <li>视频</li>
- <li>课程</li>
- </ul>
- </li>
- <li class="box">首页</li>
- <li class="box">论坛</li>
- <li class="box">视频</li>
- <li class="box">课程</li>
- </ul>
- </body>
- <script>
- window.onload = function(){
- var oMark = document.querySelector('.mark');
- var oBox = document.querySelectorAll('.box');
- var childUl = oMark.querySelector('ul');
- var timer = null;
- var timer2 = null;//延迟定时器,100毫秒人的眼睛是察觉不出来的
- var iSpeed = 0;
- for (var i=0;i<oBox.length;i++){
- oBox[i].onmouseover = function(){
- clearTimeout(timer2);
- startMove(this.offsetLeft);
- };
- oBox[i].onmouseout = function(){
- timer2 = setTimeout(function(){
- startMove(0);
- },100);
- };
- }
- oMark.onmouseover = function(){
- clearTimeout(timer2);
- };
- oMark.onmouseout= function(){
- timer2 = setTimeout(function(){
- startMove(0);
- },100);
- };
- function startMove(iTarget){
- clearInterval(timer);
- timer = setInterval(function(){
- iSpeed += (iTarget -oMark.offsetLeft)/5;
- iSpeed *= 0.75;
- if(Math.abs(iSpeed)<=1 && Math.abs(iTarget -oMark.offsetLeft)<=1){
- clearInterval(timer);
- oMark.style.left = iTarget + 'px';
- childUl.style.left = -iTarget + 'px';
- iSpeed = 0;
- }else {
- oMark.style.left = oMark.offsetLeft + iSpeed +'px';
- childUl.style.left = -oMark.offsetLeft +'px';
- }
- },30);
- };
- };
- </script>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0705/327355.html