Home > Developer > JavaScript
1. Simple unfold and close effect:
1.1 Static Structure HTML code Analysis
The body contains the outermost div id= "pn" and the button a id= "BTN", while the inclusion div id= "pn" contains a P tag and div id= "HPN" (Expand and Close section)
<body> <div id="PN" class="PN"> <p> Categories: All movie drama Entertainment </p> <div id="HPN" class="HPN"> <p> region: Mainland Hong Kong USA Korea France UK </p> <p> Genre: Martial arts comedy adventure War animation </p> <P&G t; Time: . - the - - . .</p> </div> </div> <a href="javascript:void (0);"Id="btn" class="btn"> Expand Options +</a></body>
The value of the href attribute in the:<a> tag of the Knowledge Point javascript:void (0) prevents clicking on the link jump.
1.2 Realization of dynamic unwinding effect JS code
<script type= "Text/javascript" >window.onload=function() {//Load Complete varHidediv=document.getelementbyid (' HPN '), BTN=document.getelementbyid (' btn '), Hflag= 1;//whether the tag is hiddenbtn.onclick=function () { if(Hflag) {//currently in a closed state, expand functionhidediv.style.display= "Block"; Btn.innerhtml= "Close Option-"; Hflag=0; }Else{//currently expanded, the function is closedHidediv.style.display= "None"; Btn.innerhtml= "Expand Options +"; Hflag=1; } } }</script>
Knowledge Point: By judging whether the Hflag is true (1) or False (0) to determine whether the content is expanded or closed, so that the corresponding operation.
2. Ads automatically unfold, the effect of timing to collect
2.1 Static Structure HTML code
<div id="adv"class="adv"> <img src= " images/adv.jpg " alt=" ad map ></div>
2.2 Realization of dynamic expansion and timing of the effect JS code
functionShowadv () {//Display AD Functions if(h<300) {h+=5; Adv.style.height=h+ "px"; }Else{ return; } setTimeout (Showadv,30); } showadv ();//Execute Unwind functionSetTimeout (HIDEADV, 5000);//Hide ad function after 5 seconds functionHideadv () {//Close ad function if(h>0) {h-=5; Adv.style.height=h+ "px"; }Else{ return; } setTimeout (Hideadv,30); }
JavaScript effects-expand options and pick up effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
