这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要分享了 js 实现带缓动动画的导航栏效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
话不多说,请看实例代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <style type="text/CSS">
- ul,li { padding: 0; margin: 0; }
- li { list-style: none; }
- #box{
- height: 48px;
- width: 900px;
- background-color: #459DF5;
- margin: 50px auto;
- position: relative;
- }
- #caution {
- width: 150px;
- height: 48px;
- background-color: #4B92D8;
- position: absolute;
- top: 0;
- left: 0;
- }
- #list {
- position: absolute;
- }
- #list li {
- width: 150px;
- height: 48px;
- float: left;
- color: #fff;
- font: 500 20px/48px "微软雅黑";
- text-align: center;
- cursor: pointer;
- }
- </style>
- <script type="text/javascript">
- window.onload = function(){
- //获取ul ID
- var oUl = document.getElementById("list");
- // 获取span ID
- var caution = document.getElementById("caution");
- //获取ul 所有孩子
- var aLi = oUl.children;
- //定时器管理
- var timer = null;
- //缓动
- var leader = 0;
- var target = 0;
- //停留
- var current = 0;
- for(var i = 0;i<aLi.length;i++){
- //鼠标移动
- aLi[i].onmouseover = function(){
- //关闭定时器
- clearInterval(timer);
- //获取当前的left值
- target = this.offsetLeft;
- //开启定时器
- timer = setInterval(autoCaution,20);
- }
- //鼠标点击
- aLi[i].onmousedown = function(){
- //清楚所有高亮的文字
- for(var j = 0;j<aLi.length;j++){
- aLi[j].style.color = "#fff";
- }
- //当前点击栏变为红色
- this.style.color = "#ccc";
- //提示框
- current = this.offsetLeft;
- caution.style.left = current+"px";
- }
- }
- //鼠标离开
- oUl.onmouseout = function(){
- //关闭定时器
- clearInterval(timer);
- target = current;
- timer = setInterval(autoCaution,20);
- }
- //缓动动画
- function autoCaution(){
- leader = leader +(target - leader) /10;
- caution.style.left = leader+"px";
- }
- }
- </script>
- </head>
- <body>
- <div id="box">
- <span id="caution"></span>
- <ul id="list">
- <li>首页</li>
- <li>公司简介</li>
- <li>企业文化</li>
- <li>招贤纳士</li>
- <li>企业论坛</li>
- </ul>
- </div>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0529/328486.html