js弹性运动滑动的菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性运动效果下滑的菜单</title>
<script>
window.onload = function(){
var oUl = document.getElementById('oul');
var oLi = oul.getElementsByTagName('li');
var oLine = document.getElementById('#underline');
var oLine= oLi[oLi.length-1]
for(var i = 0; i < oLi.length-1; i++){
oLi[i].onmouseover = function(){
move(oLine,this.offsetLeft);
console.log(this.offsetLeft)
}
}
}
//封装好的函数:
var speed = 0;
var left = 0;
function move(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
speed += (target - obj.offsetLeft)/5;
speed *= 0.7;
left += speed;
obj.style.left = left + "px";
if(Math.abs(speed)<1&&Math.abs(target-left)<1){
obj.style.left = target + "px";
clearInterval(obj.timer);
}
document.title = obj.style.left + '|' + target;
}, 30)
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
float: left;
width: 100px;
height: 30px;
border: 1px solid #ccc;
position: relative;
text-align: center;
line-height: 30px;
z-index: 2;
cursor: pointer;
}
#underline{
width: 101px;
height: 5px;
background-color: red;
position: absolute;
overflow: hidden;
border: none;
top: 26px;
left: 0;
z-index: 1;
}
ul{
width: 508px;
height: 30px;
position: relative;
margin: 100px auto 0;
}
</style>
</head>
<body>
<ul id="oul">
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<li>联系方式</li>
<li id="underline"></li>
</ul>
</body>
</html>
转载于:https://www.cnblogs.com/zy88zj91/p/7083035.html
js弹性运动滑动的菜单相关推荐
- JS左侧竖向滑动菜单
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS左侧竖向滑动菜单 - w ...
- html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
- 很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
- css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
- html鼠标自动向下滑动,js实现鼠标感应向下滑动隐藏菜单的方法
本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 隐藏在网页左上角感应鼠标向下滑出的隐藏菜单 BACKGROUND-COLOR: blue; BORDER ...
- 微信小程序可横向滑动展开菜单
微信开发者工具 通过scroll-view组件实现微信小程序的横向菜单可滑动的菜单,并在尾端插入一个图片,通过绑定事件实现点击之后更改view标签属性达到一个展开效果. 通过三元运算符控制组件的css ...
- JavaScript的运动——弹性运动原理及案例
弹性运动在生活中类似考虑阻力的单摆运动,即在指定位置的左右摇摆最后停在指定位置 基础代码 html代码 <div></div> <span></span> ...
- 移动端手指操控左右滑动的菜单
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport&quo ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: 1 <html> 2 &l ...
最新文章
- 1.10 throws和throw:声明和抛出异常
- 【PAT】A1063 Set Similarity
- mysql 事务权限_0428-mysql(事务、权限)
- mysql ---- innodb-1- 体系结构、文件、表
- 抽走超大桌布之后保持桌面物体不掉,需要多快的速度?
- 前端学习(130):HTML和CSS发展历史
- [Leedcode][JAVA][第202题][快乐数]
- Docker学习总结(9)——Docker常用命令
- js 将点击事件当作参数引入_NodeJS中的事件驱动程序实现原理解析
- python 动态语言 优美_Python动态语言之魅力大揭秘
- 计算机应用基础辅导资料,《计算机应用基础》辅导资料三
- 模型--vgg16.npy下载
- 百利天恒更新招股书:上半年收入约3亿元,持续加大研发投入
- 为激情为生---“激情团队宣言”
- Java实现Sunday算法
- 计算机和遥感哪个专业好啊,遥感科学与技术专业毕业是干什么的
- “COMSOL Multiphysics多物理场仿真技术与应用” 电化学专题
- 39. 腾讯面试题:有一千万条短信,有重复,以文本文件的形式保存,一行一条,有重复。
- 华为模拟器实现wlan 三层旁挂式组网
- Excel如何将多个工作簿合并到一个工作簿中