js implements a very simple focus map switching special effect example

Home

Web Front-end

JS Tutorial

js implements a very simple focus map switching special effect example_javascript skills

May 16, 2016 pm 04:00 PM

js switch focus map

The example in this article describes how to implement a very simple focus map switching effect in js. Share it with everyone for your reference. The specific analysis is as follows:

This is a very, very simple focus diagram (more like a sliding door), which can be used as a reference for beginners

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style type="text/css"&gt;
* {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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="area mid"&gt;
 &lt;div id="imgbox" class="bbbb"&gt;
  &lt;ul id="pic_list" class="aaaa"&gt;
   &lt;li class="show" id="one"&gt;
   &lt;img src="images/1317279971_77011100.jpg" width="240" /&gt;
   &lt;/li&gt;
   &lt;li id="two"&gt;
   &lt;img src="images/1317279972_01691900.jpg" width="240" /&gt;
   &lt;/li&gt;
   &lt;li id="three"&gt;
   &lt;img src="images/1317279973_69082200.jpg" width="240" /&gt;
   &lt;/li&gt;
   &lt;li id="four"&gt;
   &lt;img src="images/1317281054_38572100.jpg" width="240" /&gt;
   &lt;/li&gt;
   &lt;li id="five"&gt;
   &lt;img src="images/1317281056_61630800.jpg" width="240" /&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div class="button" class="dddd"&gt;
  &lt;ul id="button" class="cccc"&gt;
   &lt;li class="current" id="but_one"&gt;1&lt;/li&gt;
   &lt;li id="but_two"&gt;2&lt;/li&gt;
   &lt;li id="but_three"&gt;3&lt;/li&gt;
   &lt;li id="but_four"&gt;4&lt;/li&gt;
   &lt;li id="but_five"&gt;5&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
(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&lt;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&lt;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&lt;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);
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot Article Tags

Hot Topics

Where is the login entrance for gmail email?

7285

Java Tutorial

1622

CakePHP Tutorial

1342

Laravel Tutorial

1259

PHP Tutorial

1206

Related knowledge

How to switch between 4g and 5g on Xiaomi Mi 14Ultra? Feb 23, 2024 am 11:49 AM

How to switch between 4g and 5g on Xiaomi Mi 14Ultra?

Operation tutorial for switching from win11 home version to professional version_Operation tutorial for switching from win11 home version to professional version Mar 20, 2024 pm 01:58 PM

Operation tutorial for switching from win11 home version to professional version_Operation tutorial for switching from win11 home version to professional version