js 弹性菜单
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性运动---弹性菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
ul {
width: 400px;
height: 30px;
position: relative;
margin: 100px auto 0;
}
li {
float: left;
width: 98px;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
text-align: center;
z-index: 2;
position: relative;
cursor: pointer;
}
.bg {
width: 100px;
height: 5px;
overflow: hidden;
background: red;
border: none;
position: absolute;
top: 24px;
left: 0;
z-index: 1;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var oBg=aLi[aLi.length-1];
var i=0;
for(i=0;i<aLi.length-1;i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function ()
{ // 移动的元素 当前对象 移动的属性
startMove(oBg,this,'left');
};
}
}; // 移动的元素 当前对象 移动的属性
function startMove(obj, index, attr)
{
iTarget=get_offset_val(index, attr);
obj.attr_name=get_offset_val(obj, attr);
if(iTarget==obj.attr_name)
return; // 如果选择的是当前的选中的元素
obj.iSpeed=0;
var iSpeed_dis=5;// 速度比值
var mc =0.7 ; // 摩擦大小 值越大元素停止运动时间越长 值越小元素停止运动的时间越快
// 防止开启多次定时器
clearInterval(obj.timer);
obj.timer=setInterval(backOut, 30); // 弹性运动
function backOut()
{
// 加、减速运动 iTarget>obj.offsetLeft加速运动 iTarget<obj.offsetLeft减速运动
obj.iSpeed+=(iTarget-obj.attr_name)/iSpeed_dis;
// 摩擦运动 让元素停止运动
obj.iSpeed*=mc;
obj.attr_name+=obj.iSpeed; // 防止小数误差 ispeed 不是整数 ，把小数保留下来
//运动速度小1 并且目标点与元素距离小于1 停止运动
if(Math.abs(obj.iSpeed)<=1 && Math.abs(obj.attr_name-iTarget)<=1)
{
obj.style[attr]=iTarget+'px';
clearInterval(obj.timer);
}
else
{
obj.style[attr]= obj.attr_name+'px';
}
} //------------------ backOut() 结束
} // 获取 offset 值
function get_offset_val(obj,attr)
{
switch(attr)
{
case 'left':
return obj.offsetLeft;
break;
case 'top':
return obj.offsetTop;
break;
case 'width':
return obj.offsetWidth;
break;
case 'height':
return obj.offsetHeight;
break;
}
}
</script>
</head> <body>
<ul id="ul1">
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<li>联系方式</li>
<li class="bg"></li>
</ul>
</body>
</html>
js 弹性菜单的更多相关文章
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
- JS树形菜单
超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
- 适合移动手机使用的js环形菜单特效插件
blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...
- jquery.smint.js 页面菜单浮动之谷歌浏览器异常
jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...
- js侧边菜单
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...
随机推荐
- apache http 跳到https
RewriteEngine OnRewriteCond %{HTTPS} !=onRewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]
- java.sql.SQLException: Error while processing statement: FAILED: Execution Error, return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask
执行Hive查询: Console是这样报错的 java.sql.SQLException: Error from org.apache.hadoop.hive.ql.exec.mr.MapRedTa ...
- 为Docker镜像添加SSH服务
一.基于commit命令创建 1. 首先下载镜像 $ docker run -it ubuntu:16.04 /bin/bash 2. 安装SSH服务 #更新apt缓存 root@5ef1d31632 ...
- SQL Server连接Oracle FAIL
第一步 安装好oracle客户端Oracle 11.2.0.3 Client Win 64-bit,并配置好TNS信息 第二步,配置odbc信息 配置好odbc连接信息,sql server肯定不能直 ...
- day70 12-存储过程和存储函数
什么是相关子查询? 这是一个子查询,子查询本身又是一个多表查询.where不能用组函数,但是可以用字符函数instr().除了order by排序没有考,查询语句的所有内容都考了.这个题有点难度. 今 ...
- day17 13.滚动结果集介绍
滚动 一般结果集只能是向下的,不是滚动的,你要是想让它滚动你得设置才行. 类名或者接口里面有静态的可以.接口里面的属性全部都是public static final,类名/接口名.是属性,这些都是常量 ...
- C++——explicit
explicit构造函数是用来防止隐式转换的.请看下面的代码: class Test1 { public: Test1(int n) { num=n; }//普通构造函数 private: int n ...
- Java-马士兵设计模式学习笔记-工厂模式-简单工厂
一.概述 1.目标:要控制任意类型交通工具的生产模式 2.目标有两层意思(1)任意类型 (2)生产模式,所以对应的,要这两个层面上抽象(Movable,VehicleFactory),利用接口,实现多 ...
- jQuery的事件处理方法
.on()方法用来处理事件 $("li").on("click",function(){ $(this).addClass("complete&quo ...
- java IO的总结
1: fileChannel 没有bufferedreader快, bufferedreader 可设置缓冲大小和编码 2: bufferedreader 的readline 遇到回车也换行