富有弹性的横向菜单代码,JS代码库,德仔网

代码语言

代码分类

【JS】富有弹性的横向菜单

作者:dezai / 发布于2014/7/17/ 518


	<!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=utf-8" />
	
	<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="http://www.baidu.com">首页</a>
	 </li>
	 <li class="co2">
	 <a href="http://www.sharejs.com/png">png图标</a>
	 </li>
	 <li class="co1">
	 <a href="http://www.sharejs.com">脚本特效</a>
	 </li>
	 <li class="co2">
	 <a href="http://www.sharejs.com/vector">矢量图</a>
	 </li>
	 <li class="co1">
	 <a href="http://www.sharejs.com/template">网站模板</a>
	 </li>
	 </ul>
	

	<div style="clear:both"></div>
	
	<div align="center">

	</div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　弹性　　横向菜单　

同语言下

可能有用的

dezai贡献的其它代码(1065)