Implementierung des sekundären Verknüpfungsmenüeffekts basierend auf Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Implementierung des sekundären Verknüpfungsmenüeffekts basierend auf Javascript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:12:18

Original

1368 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt Ihnen den entsprechenden Code zur Realisierung des Linkage-Menüeffekts der zweiten Ebene in Javascript mit. Der spezifische Inhalt ist wie folgt

Die Darstellung ist wie folgt:

Die spezifischen Implementierungsschritte sind wie folgt:
1. Der verwendete js-Code lautet wie folgt:

<script type="text/javascript">
var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"];
var arr_city=[
        ["请选择城市/地区"],
        ["中关村","海淀区","朝阳区","昌平区","丰台区","大兴区"],
        ["宝坻区","浦东新区","长宁区","徐汇区","虹口区","宝山区"],
        ["和平区","河东区","河西区","塘沽区","大港区","北辰区"],
        ["郑州市","洛阳市","商丘市","开封市","安阳市","濮阳市"],
        ["济南市","青岛市","烟台市","德州市"],
        ["石家庄","菏泽市","唐山市"],
      ];
function init()
{
  var province=document.form1.province;
  province.style.width=150+"px";
  var city=document.form1.city;
  city.style.width=150+"px";
  //给province赋值高度，才能在其里面写入内容
  province.length=arr_province.length;
  for(var i=0;i<arr_province.length;i++)
  {
    province.options[i].text=arr_province[i];
    province.options[i].value=arr_province[i];
  }
  //设置默认被选中的选项
  var index=0;
  province.selectedIndex=index;
  //给city赋值高度，才能在其里面写入内容
  city.length=arr_city[index].length;
  for(var j=0;j<arr_city[index].length;j++)
  {
    city.options[j].text=arr_city[index][j];
    city.options[j].value=arr_city[index][j];
  }
  
}
function select_change(num)
{
  var city=document.form1.city;
  city.length=0;
  city.length=arr_city[num].length;
  for(var i=0; i<arr_city[num].length;i++)
  {
    city.options[i].text=arr_city[num][i];
    city.options[i].value=arr_city[num][i];
  }
}
</script>

Nach dem Login kopieren

Der Code in 2.body lautet wie folgt:

<body onload="init()">
  <form name="form1">
  所在地区：<select name="province" onchange="select_change(this.selectedIndex)"></select>
  城市：<select name="city"></select>
  </form>
</body>

Nach dem Login kopieren

Zweiter Effekt:
1. Verwenden Sie Javascript, um den Effekt des Vergrößerns zu erzielen, wenn die Maus über das Bild bewegt wird, und das Bild wiederherzustellen, wenn die Maus herausbewegt wird. Der spezifische Code lautet wie folgt:

<script type="text/javascript">
function init()
{
  var img0=document.getElementById("img0");
  img0.onmouseover=function()
      {
        img0.style.width=img0.offsetWidth*1.5+"px"
      }
  img0.onmouseout=function()
      {
        img0.style.width=img0.offsetWidth/1.5+"px"
      }
}
</script>

Nach dem Login kopieren

Der Code in 2.body lautet wie folgt:

<body onload="init()">
<img id="img0" src="images/4.jpg" />
</body>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.