h5+css 菜单导航---改变宽度

来源：互联网发布：汽车行业的大数据应用编辑：程序博客网时间：2024/05/01 23:11

菜单导航—改变宽度

1、使用javascript脚本实现：

<!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" /><title>导航菜单</title><style type="text/css">* { margin: 0; padding: 0; font-size: 14px; }a { color: #333; text-decoration: none }ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }ul li { float: left }ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }a.on, a:hover { background: #F60; color: #fff; }</style><script>window.onload=function(){    var as = document.getElementsByTagName("a");    for(var i=0; i<as.length; i++)    {        as[i].onmouseover=function()        {          var this1 = this;          clearInterval(si);          var si = setInterval          (              function()              {                  this1.style.width = this1.offsetWidth+10+"px";                  if(this1.offsetWidth>160)                  {                      clearInterval(si);                  }              },30);        }        as[i].onmouseout = function()        {            var this2 = this;            clearInterval(si);            var si = setInterval            (                function()                {                    this2.style.width=this2.offsetWidth-10+"px";                    if(this2.offsetWidth<120)                    {                        clearInterval(si);                    }                },30);        }    }}</script></head><body><ul>    <li><a class="on" href="#">首　　页</a></li>    <li><a href="#">新闻快讯</a></li>    <li><a href="#">产品展示</a></li>    <li><a href="#">售后服务</a></li>    <li><a href="#">联系我们</a></li></ul></body></html>

效果图：
这里写图片描述

0 0