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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
JS组件Bootstrap导航条使用方法详解
导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="
-
基于JS代码实现导航条弹出式悬浮菜单
1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所
-
纯JS实现弹性导航条效果
效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto;
-
javascript实现的鼠标悬停时动态翻滚的导航条
动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{
-
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
js实现横向拖拽导航条功能
效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs
-
JS实现选中当前菜单后高亮显示的导航条效果
本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c
-
仿客齐集首页导航条DIV+CSS+JS [代码实例]
作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下: 你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info"> <div
-
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm