suchen

Heim >Web-Frontend >js-Tutorial >js implementiert einen sehr einfachen Fokus-Map-Switching-Spezialeffekt example_javascript skills

js implementiert einen sehr einfachen Fokus-Map-Switching-Spezialeffekt example_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:00:301393Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie ein sehr einfacher Fokus-Map-Umschalteffekt in js implementiert wird. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist ein sehr, sehr einfaches Fokusdiagramm (eher wie eine Schiebetür), das als Referenz für Anfänger verwendet werden kann

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {
width:240px;height:270px;
overflow:hidden;background:#999;
margin-top:150px;position:relative;
}
#pic_list {
position:relative;
}
#pic_list li {
position:absolute;visibility:hidden;
}
#pic_list li.show {
visibility:visible;
}
#pic_list li img {
vertical-align:middle;
}
.button {
width:240px;height:20px;
line-height:20px;background:#ccc;
position:absolute;bottom:0px;
}
#button {
float:right;
}
#button li {
float:left;width:20px;height:20px;
text-align:center;margin:0 3px;
font-family:"Arial";font-size:12px;
color:#fff;background:#000;
}
#button li.current {
background:#f00;cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
 <div id="imgbox" class="bbbb">
  <ul id="pic_list" class="aaaa">
   <li class="show" id="one">
   <img src="images/1317279971_77011100.jpg" width="240" />
   </li>
   <li id="two">
   <img src="images/1317279972_01691900.jpg" width="240" />
   </li>
   <li id="three">
   <img src="images/1317279973_69082200.jpg" width="240" />
   </li>
   <li id="four">
   <img src="images/1317281054_38572100.jpg" width="240" />
   </li>
   <li id="five">
   <img src="images/1317281056_61630800.jpg" width="240" />
   </li>
  </ul>
 </div>
 <div class="button" class="dddd">
  <ul id="button" class="cccc">
   <li class="current" id="but_one">1</li>
   <li id="but_two">2</li>
   <li id="but_three">3</li>
   <li id="but_four">4</li>
   <li id="but_five">5</li>
  </ul>
 </div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
var start;
function autoplay(start){for(i=start;i<button.length;i++){
//设置起始值为start参数.
 (function(){
 var p=i;
 // 为p赋值i. i等于0,1,2,3,4;
 button[i].onmouseover=function change(){
 //button[0],button[1],button[2],button[3],button[4]
 //onmouseover可以触发函数;
 for(j=0;j<this.parentNode.childNodes.length;j++){
 //以this(当前触发事件的元素)为起点,的父节点的所有子节点
 //的length值为最高值,开始遍历. ;
 this.parentNode.childNodes[j].className="";
 //以this(当前触发事件的元素)为起点
 //的父节点的所有子节点的className为空. 危险慎用.;
  }
 this.className="current";
 //this. 即当前触发onmouseover的元素的className为"current";
 for(m=0;m<pics.length;m++){
 //以pics.length为最高值进行遍历.遍历pics.;
 pics[m].className="";
 //清空所有pics数组中所有元素的className;
 if (m==p){
 //当m==p (p==i) 所以m=i时,触发下列函数
  pics[m].className="show";
  //pics的第m个元素的className值为show; m在这里等于i;
  }
 }
 }
 })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller 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：Beispiel für eine js-String-Operationsmethode: Analyse_Javascript-KenntnisseNächster Artikel：Beispiel für eine js-String-Operationsmethode: Analyse_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen