suchen

Heim >Web-Frontend >js-Tutorial >Implementierung des sekundären Verknüpfungsmenüeffekts basierend auf Javascript_Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 15:12:181385Durchsuche

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>

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>

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>

Der Code in 2.body lautet wie folgt: 

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

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösungen für das Problem des WeChat-JSSDK-Fehlers in Iframe-Pages_Javascript-FähigkeitenNächster Artikel：Lösungen für das Problem des WeChat-JSSDK-Fehlers in Iframe-Pages_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen