注册 | 登陆

您的位置：阿里西西 > 网页特效 > 导航菜单 > 详细内容

7顶

鼠标移动到左侧产品分类对应输出显示右侧div内容区域

稿源：互联网 2022-04-02 21:40:00 点击： 18308 撤稿纠错

鼠标移动到左侧产品分类时，对应输出右侧div内容区域。就是仿http://shop.qq.com/ 左侧的那个菜单导航效果

以下讨论的是和鼠标移动菜单相关的鼠标移动到左侧产品分类对应输出显示右侧div内容区域教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style>
#ProMenu{width:200px;clear:both;float:left;}
#ProMenu .title{width:200px;height:25px;background:url(images/bg.png) left -117px;float:left;clear:both;line-height:25px;}
#ProMenu span{float:left;width:200px;}
#ProMenu a{display:block;width:188px;height:25px;line-height:25px;font-size:13px;border-bottom:1px solid #832B00;margin-left:1px;display:inline;float:left;padding-left:10px;background:url(images/bg.png) -600px -60px;}
#ProMenu a:hover{background:#FFD5BF url(images/menu_bg_2.gif) no-repeat 180px;}
#ProMenu span{float:left;}
#ProMenu .drop{position:absolute;width:100px;height:80px;border:1px solid #581800;overflow:hidden;float:left;}
#ProMenu .drop a{width:100px;height:25px;line-height:25px;border-bottom:1px solid #832B00;text-align:center;margin:0;margin-top:-1px;padding-left:0;}
#ProList{width:200px;display:inline;float:left;}
#ProList li{width:60px;padding:2px 0 0 25px;float:left;}
#ProList li img{width:58px;height:58px;border:1px solid #CCC;float:left;}
#ProList h1{width:60px;float:left;text-align:center;line-height:16px;height:16px;overflow:hidden;font-size:12px;float:left;color:#006699;cursor:pointer;}
#ProList h2{width:60px;float:left;text-align:center;line-height:16px;height:16px;overflow:hidden;font-size:12px;float:left;color:#FF0000;cursor:pointer;}
#ProList .title{width:200px;height:25px;background:#832b00 url(images/bg.png) -411px -187px;float:left;padding:0;margin-bottom:10px;}
#ProList .more{width:140px;border:0;background:none;text-align:right;float:left;}
#ProList .more a{font-size:12px;color:#999;}
</style>
<div id="ProMenu">
    <li class="title"></li>
    <li>
     <span>
      <a href="" id="DropBM1" onmouseover="Play2(1)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM1" class="drop" onmouseover="Play2(1)" onmouseout="Play2(0)">
       <a href="class">小类别1</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM2" onmouseover="Play2(2)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM2" class="drop" onmouseover="Play2(2)" onmouseout="Play2(0)">
       <a href="class">小类别2</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM3" onmouseover="Play2(3)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM3" class="drop" onmouseover="Play2(3)" onmouseout="Play2(0)">
       <a href="class">小类别3</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM4" onmouseover="Play2(4)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM4" class="drop" onmouseover="Play2(4)" onmouseout="Play2(0)">
       <a href="class">小类别4</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM5" onmouseover="Play2(5)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM5" class="drop" onmouseover="Play2(5)" onmouseout="Play2(0)">
       <a href="class">小类别5</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM6" onmouseover="Play2(6)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM6" class="drop" onmouseover="Play2(6)" onmouseout="Play2(0)">
       <a href="class">小类别6</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM7" onmouseover="Play2(7)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM7" class="drop" onmouseover="Play2(7)" onmouseout="Play2(0)">
      <a href="class">小类别7</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM8" onmouseover="Play2(8)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM8" class="drop" onmouseover="Play2(8)" onmouseout="Play2(0)">
       <a href="class">小类别8</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM9" onmouseover="Play2(9)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM9" class="drop" onmouseover="Play2(9)" onmouseout="Play2(0)">
       <a href="class">小类别9</a>
      </span>
     </span>
     <span>
      <a href="" id="DropBM10" onmouseover="Play2(10)" onmouseout="Play2(0)">类别一</a>
      <span id="DropM10" class="drop" onmouseover="Play2(10)" onmouseout="Play2(0)">
       <a href="class">小类别10</a>
      </span>
     </span>
     <script>
// JavaScript Document
/*
*
*滑门效果类
*2009-3-1
*/
function Qlide()
{
 this.DivId="";
 this.DivCount=0;
 this.DivNum=1;
 //参数设置init(divid,divcount,num) =>[DIV名称的前面部如：div1,div2取div为divid,显则无效!][DIV总数][默认显示第num个DIV/可为空]
 this.init=function(divid,divcount,num)
 {
   this.DivId=divid;
   this.DivCount=(isNaN(divcount))?0:divcount;
   if(num!="")
   {
    this.DivNum=(isNaN(num))?0:num;
   }
   this.play(num);
 }
 //进行
 this.play=function(num)
 {
   for(var i=1;i<=this.DivCount;i++){
    if(document.getElementById(this.DivId+String(i))!=null){
     if(num==i)
     document.getElementById(this.DivId+String(i)).style.display="";
     else
     document.getElementById(this.DivId+String(i)).style.display="none";
    }
   }
 } 
}
      var d2=new Qlide();
      d2.init("DropM",10,0);
      var b;
      function Play2(id)
      {
       if(id!=0)
       {
        document.getElementById("DropBM"+id).style.background="#FFD5BF url(style/images/menu_bg_2.gif) no-repeat 180px";
        b=id;
       }
       else
       { 
        
        document.getElementById("DropBM"+b).style.background="url(style/images/bg.png) -600px -60px";
       }
       d2.play(id);
      }
    </script>
    </li>
   </div>
   <div class="bottom">
   </div>
  </div>

关于鼠标移动到左侧产品分类对应输出显示右侧div内容区域的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011092874147.shtml方便下次再访问哦。

·上一篇： 使用JS编写面向对象版的放烟花效果代码
·下一篇： 隐藏省略简介内容超出部分文字特效

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »