Home > Developer > Web Develop

JS effect: Picture Carousel, tab, side menu drop-down effect, progress bar effect, slide effect, buddy list check effect, click to select Show Effect

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

TAB Effects table:

<body>
<div id= "AAA" >
<div class= "BBB" style= "width:50px; height:30px; Background-color: #3F0 "onclick="Show (' D1 ')"> Entertainment </div>
<div class= "BBB" style= "width:50px; height:30px; Background-color: #FF0 "onclick="Show (' D2 ')"> Social </div>
<div class= "BBB" style= "width:50px; height:30px; Background-color: #00F "onclick="Show (' D3 ')"> Sports </div>
<div class= "BBB" style= "width:50px; height:30px; Background-color: #999 "onclick="Show (' D4 ')"> Military </div>
</div>
<div class= "CCC"id= "D1"Style= "width:200px; height:200px; Background-color: #3F0; " > Entertainment News </div>
<div class= "CCC" id= "D2" Style= "width:200px; height:200px; Background-color: #FF0;Display:none;"> Social news </div>
<div class= "CCC" id= "D3" Style= "width:200px; height:200px; Background-color: #00F;Display:none;"> Sports News </div>
<div class= "CCC" id= "D4" Style= "width:200px; height:200px; Background-color: #999;Display:none;"> Military News </div>
</body>
<script type= "Text/javascript" >
function Show (ID)
{
var attr =document.getelementsbyclassname ("CCC");
for (Var i=0;i<attr.length;i++)
{
Attr[i].style.display= "None";
}
document.getElementById (ID). style.display= "Block";
}

As follows:

Photo Carousel Effect Table:

<body>
<div id= "Menu" >
</div>

</body>
<script type= "Text/javascript" >
Window.setinterval ("Huan ()", 2000);
var a=document.getelementsbyclassname ("TP"). Length-1;
var b=0;
Function Huan ()
{
var attr=document.getelementsbyclassname ("TP");
b++;
if (b>a)
{
b=0;
}
for (Var i=0;i<=a;i++)
{
Attr[i].style.display= "None";
}
attr[b].style.display= "Block";
}
</script>

Side menu drop-down effect:

Style table:. ziwai{display= "None"}

<body>
<div id= "Menu" >
<div class= "List" > Home </div>
<div class= "List" > Academic Area </div>
<div id= "ZWW" class= "list" onclick= "Show ()" > Download area </div>
<div id= "Ziwai" >
<div class= "Zi" > resume file Download </div>
<div class= "Zi" > Teacher evaluation Download </div>
<div class= "Zi" > Other downloads </div>
</div>
<div class= "List" > Personal space </div>
<div class= "List" > Data Maintenance </div>
</div>
</body>
<script type= "Text/javascript" >
function Show ()
{
var A=document.getelementbyid ("Ziwai");
if (a.style.display== "None")
{
a.style.display= "Block";
}
Else
{
A.style.display= "None";
}
}
</script>

<div style= "width:200px; height:600px; margin-top:30px ">

<div class= "F" onclick= "Xuan (This)" onmouseover= "Bian [This]" onmouseout= "Hui (This)" xz= "0" > Zhang San </div>
<div class= "F" onclick= "Xuan (This)" onmouseover= "Bian [This]" onmouseout= "Hui (This)" xz= "0" > John Doe </div>
<div class= "F" onclick= "Xuan (This)" onmouseover= "Bian [This]" onmouseout= "Hui (This)" xz= "0" > Harry </div>
<div class= "F" onclick= "Xuan (This)" onmouseover= "Bian [This]" onmouseout= "Hui (This)" xz= "0" > Zhao Liu </div>
<div class= "F" onclick= "Xuan (This)" onmouseover= "Bian [This]" onmouseout= "Hui (This)" xz= "0" > Ma VII </div>

</div>

</body>
<script type= "Text/javascript" >

function Xuan (a)
{
var attr = Document.getelementsbyclassname ("f");
for (Var i=0;i<attr.length;i++)
{
Attr[i].style.backgroundcolor = "#63C";
Attr[i].setattribute ("XZ", "0");
}
A.setattribute ("XZ", "1");
A.style.backgroundcolor = "#F63";
}

function Bian (a)
{
var attr = Document.getelementsbyclassname ("f");

for (Var i=0;i<attr.length;i++)
{
if (Attr[i].getattribute ("xz") = = "0")
{
Attr[i].style.backgroundcolor = "#63C";
}
}

A.style.backgroundcolor = "#F63";
}


function Hui (a)
{
var attr = Document.getelementsbyclassname ("f");

for (Var i=0;i<attr.length;i++)
{
if (Attr[i].getattribute ("xz") = = "0")
{
Attr[i].style.backgroundcolor = "#63C";
}
}
}

Progress bar Effect:

<style type= "Text/css" >
*{margin:0px auto; padding:0px}
#wai {width:200px; height:10px; border:1px solid #60F;}
#nei {width:0px; height:10px; Background-color: #F33; Float:left}
</style>

<body>
<div style= "width:600px; height:300px; margin-top:30px ">


<div id= "Wai" >
<div id= "Nei" >

</div>
</div>

<input type= "button" value= "Start" onclick= "Start ()"/>
</div>
</body>

<script type= "Text/javascript" >

function Start ()
{
Bian ();
}

var bfb = 0;
function Bian ()
{
Change the percentage
Bfb= bfb+1;

Change width
document.getElementById ("Nei"). style.width = bfb+ "%";

Judge
if (bfb<100)
{
Window.settimeout ("Bian ()", 50);
}

}

</script>

Slide Effect:

<style type= "Text/css" >
*{margin:0px auto; padding:0px}
#left {height:600px; Background-color: #63C; Float:left}
#right {height:600px; Background-color: #F33; Float:left}
#btn {width:30px; height:30px; Background-color: #FFF; position:relative; top:285px; color: #60F; font-weight:bold; Text-align:center; line-height:30px; Vertical-align:middle; Float:left}
#btn: hover{Cursor:pointer}
</style>

<body>
<div style= "width:1000px; height:600px ">

<div id= "left" style= "width:200px;" >
<div id= "btn" onclick= "Bian ()" style= "left:185px;" >-></div>
</div>
<div id= "Right" style= "width:800px;" >
</div>

</div>
</body>

<script type= "Text/javascript" >

function Bian ()
{
Dong ();
}

Change size and position
Function Dong ()
{
var D1 = document.getElementById ("left");
var D2 = document.getElementById ("right");
var btn = document.getElementById ("btn");

Left Div widened
var yskd1 = d1.style.width;
var w1 = yskd1.substr (0,yskd1.length-2);
var w1 = parseint (W1) +2;

D1.style.width = w1+ "px";

Right Div Narrows
var yskd2 = d2.style.width;
var w2 = yskd2.substr (0,yskd2.length-2);
var w2 = parseint (W2)-2;
D2.style.width = w2+ "px";

Move the button
var ysjl = Btn.style.left;
var W3 = ysjl.substr (0,ysjl.length-2);
var W3 = parseint (W3) +2;
Btn.style.left = w3+ "px";

if (w2>200)
{
Self Tune Yourself
Window.settimeout ("Dong ()", 1);
}

}

</script>

<div style= "width:600px; height:500px; margin-top:20px ">

<div style= "width:200px; height:300px; Float:left ">
<select id= "List1" size= "style=" width:200px; height:300px ">
<option> Shandong </option>
<option> Beijing </option>
<option> Hebei </option>
<option> Heilongjiang </option>
<option> Henan </option>
</select>
</div>
<div style= "width:80px; height:300px; Float:left ">

<input type= "button" value= "single Shift" Id= "BTN1" style= "width:70px; height:30px "onclick=" Dan () "/>
<input type= "button" value= "Full Shift" id= "btn2" style= "width:70px; height:30px "onclick=" Duo () "/>

</div>
<div style= "width:200px; height:300px; Float:left ">
<select id= "List2" size= "style=" width:200px; height:300px ">
</select>
</div>

</div>

function Dan ()
{
Remove the list 1 selected values
var list1 = document.getElementById ("List1");
var v = list1.value;

Create an option item
var s = "<option class= ' O2 ' >" +v+ "</option>";

Determine if there is a list2 inside the
var attr = document.getelementsbyclassname ("O2");
var cz = true;
for (Var i=0;i<attr.length;i++)
{
alert (attr[i].innerhtml);
if (ATTR[I].INNERHTML==V)
{
CZ = false;
Break
}
}

if (CZ)
{
Throw the option item to List2
var list2 = document.getElementById ("List2");
List2.innerhtml +=s;
}
}


function Duo ()
{
document.getElementById ("List2"). InnerHTML = document.getElementById ("List1"). InnerHTML;
}

：

<div style= "width:600px; height:100px; " >

<select id= "Year" >
</select>
Years
<select id= "Month" onchange= "Fillday ()" >
</select>
Month
<select id= "Day" >
</select>
Day

</div>

fillyear ();
fillmonth ();
fillday (); 　　
Function Fillyear ()
{
var sj = new Date ();
var Nian = Sj.getfullyear ();　　　　

var s = "";
for (Var i=nian-5;i<nian+6;i++)
{
if (I==nian)
{
S + = "<option selected = ' selected ' > ' +i+ ' </option> ';　　　　　　　　　　
}
Else
{
S + = "<option>" +i+ "</option>";
}
}

document.getElementById ("year"). InnerHTML = s;
}

Function Fillmonth ()
{
var sj = new Date ();
var Yue = sj.getmonth () +1;　　　　　　

var s = "";
for (Var i=1;i<13;i++)
{
if (I==yue)
{
S + = "<option selected= ' Selected ' > "+i+" </option> ";　　　　　　　　　　　　
}
Else
{
S + = "<option>" +i+ "</option>";
}
}

document.getElementById ("month"). Innerhtml=s;
}

function Fillday ()
{
var sj = new Date ();
var Tian = sj.getdate ();

Take the month to find the number of days
var Yue = document.getElementById ("month"). Value;
var n = 31;
if (yue==4 | | yue==6 | | yue==9 | | YUE==11)
{
n = 30;
}
else if (yue==2)
{
n=28;
}

Add with Loops
var s = "";
for (Var i=1;i<n+1;i++)
{
if (I==tian)
{
s + = "<option selected= ' selected ' >" +i+ "</option>";
}
Else
{
s + = "<option>" +i+ "</option>";
}
}

document.getElementById ("Day"). InnerHTML = S;

}

Click to select Show Effects:

<style type= "Text/css" >
*{margin:0px auto; padding:0px}
#xiala {width:180px; height:33px; border:1px solid #999; text-align:center; line-height:33px; vertical-align:middle;}
#xiala: hover{Cursor:pointer}

#zi {width:180px; height:150px; border:1px solid #63C; border-top:0px; Display:none}

list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid # 63C; Background-color: #CCC}
. list:hover{cursor:pointer; Background-color: #63C; Color:white}

</style>

<div style= "width:700px; height:500px; margin-top:30px ">

<div id= "Xiala" onclick= "Show ()" ></div>
<div id= "Zi" >
<div class= "list" onclick= "Xuan (This)" > Shandong </div>
<div class= "list" onclick= "Xuan (This)" > Zibo </div>
<div class= "list" onclick= "Xuan (This)" > Zhangdian </div>
</div>
</div>

<script type= "Text/javascript" >
function Show ()
{
document.getElementById ("Zi"). style.display= "Block";
}


function Xuan (YS)
{
var v = ys.innertext;

document.getElementById ("Xiala"). InnerText = V;

document.getElementById ("Zi"). style.display= "None";
}
</script>

The submenu shows hidden effects:

*{margin:0px auto; padding:0px}
#menu {width:700px; height:40px; border:1px solid #999; margin-top:30px}
. list{width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family: Microsoft ya black; Float:left}
. list:hover{cursor:pointer; Background-color: #63C; Color:white}
ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px}
. zi{width:100px; height:100px; Background-color: #6C3; Display:none}

<div id= "menu",
<div class= ' list ' onmouseover= "Show (' Z1 ')" onmouseout= "Yincang ()" > Home </div>
<div class= "Ziwai";
<div class= "zi" id= "z1" ></DIV>
</div>
<div class= ' list ' Onmouseover= ' Show (' Z2 ') "onmouseout=" Yincang () "> Product introduction </div>
<div class=" Ziwai ";
<div class= "Zi" id= "Z2" ></DIV>
</div>
<div class= ' list ' onmouseover= ' Show (' Z3 ') ' onmouseout= ' Yincang () "> Company profile </div>
<div class=" Ziwai ";
<div class=" zi "id=" Z3 "></DIV>
< /div>
<div class= ' list ' onmouseover= "Show (' Z4 ')" onmouseout= "Yincang ()" > Contact us </div>
<div Class= "Ziwai",
<div class= "zi" id= "Z4" ></DIV>
</div>
<div class= ' list ' Onmouseover= "Show (' Z5 ')" onmouseout= "Yincang ()" > news </div>
<div class= "Ziwai";
<div class = "Zi" id= "Z5" ></DIV>
</div>
</div>

<script type= "Text/javascript" >

function Show (ID)
{
Make all the submenus hidden
var attr = document.getelementsbyclassname ("Zi");

for (var i=0; i<attr.length;i++)
{
Attr[i].style.display = "None";
}

Make the submenu associated with the menu display
document.getElementById (id). style.display = "block";
}

function Yincang ()
{
var attr = document.getelementsbyclassname ("Zi");

for (var i=0; i<attr.length;i++)
{
Attr[i].style.display = "None";
}
}

</script>

JS effect: Picture Carousel, tab, side menu drop-down effect, progress bar effect, slide effect, buddy list check effect, click to select Show Effect

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
moire effect bluebird effect stock effect equalizer effect scream effect effect definition effect minecraft

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More