JS实现横向拉伸动感伸缩菜单效果代码
更新时间：2015年09月04日 12:32:17 作者：企鹅
这篇文章主要介绍了JS实现横向拉伸动感伸缩菜单效果,涉及javascript基于定时函数及鼠标事件操作页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码。分享给大家供大家参考。具体如下：
这是一款JS实现的纵向拉伸变横向拉伸，动感伸缩菜单，紧身排列的CSS菜单，可用在博客等重要的位置部分作菜单，学习JavaScript前端设计的也可以作为参考范例。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>有弹性的菜单</title>
<style>
*{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type:
none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px;
height:50px; overflow:hidden; font-size:16px; text-align:center; cursor:
pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px;
line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37}
.co2{ background:#028fbc}
</style>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById("nav");
var aLi = oUl.getElementsByTagName("li");
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].speed = 0;
aLi[i].onmouseover = function() {
startMove(this, 250);
};
aLi[i].onmouseout = function() {
startMove2(this, 100);
};
}
};
function startMove(obj, iTarget) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
doMove(obj, iTarget);
}, 30)
};
function doMove(obj, iTarget) {
obj.speed += 3;
if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
clearInterval(obj.timer);
obj.timer = null;
}
else {
if (obj.offsetWidth + obj.speed >= iTarget) {
obj.speed *= -0.7;
obj.style.width = iTarget + "px";
}
else {
obj.style.width = obj.offsetWidth + obj.speed + "px";
}
}
};
function startMove2(obj, iTarget) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
doMove2(obj, iTarget);
}, 30)
};
function doMove2(obj, iTarget) {
obj.speed -= 3;
if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
clearInterval(obj.timer);
obj.timer = null;
}
else {
if (obj.offsetWidth + obj.speed <= iTarget) {
obj.speed *= -0.7;
obj.style.width = iTarget + "px";
}
else {
obj.style.width = obj.offsetWidth + obj.speed + "px";
}
}
};
</script>
</head>
<body>
<ul id="nav" class="naver">
<li class="co1">
<a href="#">首页</a>
</li>
<li class="co2">
<a href="#">爱好</a>
</li>
<li class="co1">
<a href="#">作品</a>
</li>
<li class="co2">
<a href="#">联系</a>
</li>
<li class="co1">
<a href="#">博客</a>
</li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了javascript内嵌式与外链式的基本应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要为大家详细介绍了JavaScript Canvas绘制动态线框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
input file上传图片预览其实很简单。今天小编就通过本文给大家介绍input file上传 图片预览功能的实现代码，比较简单，对input file 上传预览功能感兴趣的朋友参考下吧2016-10-10
这篇文章主要介绍了JavaScript对象的特性与实践应用,结合实例形式较为深入的分析了javascript对象的相关概念、操作方法及注意事项,需要的朋友可以参考下2018-12-12
下面小编就为大家带来一篇老生常谈ES6中的类。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
bootstrapValidator 重新启用提交按钮的方法
bootstrapValidator 使用中，由于字段检查等原因，致使提交按钮失效。如何重新启用提交按钮呢？下面小编给大家介绍下bootstrapValidator 重新启用提交按钮的方法,需要的朋友可以参考下2017-02-02
JavaScript判断变量是否为undefined的两种写法区别
这篇文章主要是对JavaScript判断变量是否为undefined的两种写法区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文主要介绍jQuery与JavaScript节点的插入方法，以及他们的具体代码实现方法，大家可以对比下他们之间的不同，希望对大家编写代码有所帮助2016-11-11
本文主要分享了原生js实现中奖信息无间隙滚动效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论