几个比较常用的特效-白红宇

几个比较常用的特效

阅读量：6491 次

发布时间：2019-06-24

本文共 11450 字，大约阅读时间需要 38 分钟。

选项卡效果表：

<body>

</div>

</body>

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";

}

效果图如下：

图片轮播效果表：

<body>

</div>

</body>

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>

侧面菜单下拉效果：

样式表里：.ziwai{display="none"}

<body>

<div class="zi">简历文件下载</div>

<div class="zi">教师评测下载</div>

</div>

</div>

</body>

function Show()

{

　　　　var a=document.getElementById("ziwai");

　　if(a.style.display=="none")

　　　　{

　　　　　　a.style.display="block";

　　　　}

　　else

　　　　{

　　　　　　a.style.display="none";

　　　　}

</script>

</div>

</body>

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";

　　　　　　　　　　}

进度条效果：

*{ margin:0px auto; padding:0px}

#wai{ width:200px; height:10px; border:1px solid #60F;}

#nei{ width:0px; height:10px; float:left}

</style>

<body>

</div>

</div>

</body>

function Start()

{

　　Bian();

}

var bfb = 0;

function Bian()

　　{

　　　　//将百分比变化

　　　　bfb= bfb+1;

　　　　//改变宽度

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

　　　　//判断

　　　　　　if(bfb<100)

　　　　　　　　{

　　　　　　　　　　window.setTimeout("Bian()",50);

　　　　　　　　}

</script>

滑动效果：

*{ margin:0px auto; padding:0px}

#left{ height:600px; float:left}

#right{ height:600px; background-color:#F33; float:left}

#btn{ width:30px; height:30px; 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>

</div>

</body>

function Bian()

{

　　Dong();

}

//改变大小和位置

function Dong()

　　{

　　　　var d1 = document.getElementById("left");

　　　　var d2 = document.getElementById("right");

　　　　var btn = document.getElementById("btn");

　　　　//左侧DIV变宽

　　　　　　var yskd1 = d1.style.width;

　　　　　　var w1 = yskd1.substr(0,yskd1.length-2);

　　　　　　var w1 = parseInt(w1)+2;

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

　　　　//右侧DIV变窄

　　　　　　var yskd2 = d2.style.width;

　　　　　　var w2 = yskd2.substr(0,yskd2.length-2);

　　　　　　var w2 = parseInt(w2)-2;

　　　d2.style.width = w2+"px";

　　　　//将按钮移动

　　　　　　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)

　　　　　　{

　　　　　　　　//自己调自己

　　　　　　　　window.setTimeout("Dong()",1);

　　　　　　}

</script>

　　</select>

</div>

</div>

　　</select>

</div>

function Dan()

{

　　//把列表1选中值取出

　　　　var list1 = document.getElementById("list1");

　　　　var v = list1.value;

　　//造一个option项

　　　　var s = "<option class='o2'>"+v+"</option>";

　　//判断list2里面是否有该项

　　　　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)

　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　//将option项扔到list2

　　　　　　　　　　　　　　　　var list2 = document.getElementById("list2");

　　　　　　　　　　　　　　　　list2.innerHTML +=s;

　　　　　　　　　　　　　　}

function Duo()

{

　　document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;

}

：

</select>

　　　　年

　　</select>

　　　　　　月

　　　　</select>

　　　　　　　　日

</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();

　　　　//取月份求天数

　　　　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;

　　　　　　　　}

　　//用循环添加

　　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;

　　}

点击选中显示效果：

*{ 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:#63C; color:white}

</style>

</div>

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";

}