Js动态效果
Js实现一些常见的动态效果。
级联下拉框
<html>
<head>
<script type="text/javascript">
var citys=new Array(3);
//使用二维数组存储
citys[0]=["长沙","湘潭","株洲","郴州"];//湖南
citys[1]=["深圳","广州","东莞","惠州"];//广东
citys[2]=["南昌","赣州","宜春"];//江西
</script>
</head>
<body>
省:<select id="p">
<option value="-1">--请选择--</option>
<option value="0">湖南省</option>
<option value="1">广东省</option>
<option value="2">江西省</option>
</select>
市:<select id="c">
<option>--请选择--</option>
</select>
</body>
</html>
<script type="text/javascript">
var p=document.getElementById("p");
var c=document.getElementById("c");
p.onchange=function(){
//当前选中的是那个省:对应的value
if(this.value!=-1){
var cs=citys[this.value];
//在插入之前先把c里面的所有的option清除
var coptions=document.getElementById("c").getElementsByTagName("option");
//每次删除下标为1的option元素,等删到数组中只有一个元素的时候就可以了
while(coptions.length>1){
coptions[1].parentNode.removeChild(coptions[1]);
}
//把市创建成option元素,追加到市的下拉列表框
for(var i=0;i<cs.length;i++){
//创建option元素
var cp=document.createElement("option");
cp.innerHTML=cs[i];
//追加到c下拉列表中
c.appendChild(cp);
}
}
}
</script>
隐藏列表框动态显示
使用鼠标移入移出事件执行一段函数。
函数获取li标签下的div标签。
在鼠标移入|移出时，操作div的css将display设置为block|none
<html>
<head>
<style type="text/css">
#hd li{
list-style: none;
float: left;
line-height: 20px;
width: 60px;
}
</style>
</head>
<body>
<ul id="hd">
<li>
分类
<div style="display: none;">
<p>文学</p>
<p>哲学</p>
</div>
</li>
<li>
账号
<div style="display: none;">
<p>购物车</p>
<p>订单</p>
</div>
</li>
<li>帮助</li>
<li>更多>></li>
</ul>
</body>
</html>
<script type="text/javascript">
var lis = document.getElementById("hd").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.getElementsByTagName("div")[0].style.display = "block";
}
lis[i].onmouseout = function(){
this.getElementsByTagName("div")[0].style.display = "none";
}
}
</script>
div切换
<html>
<head>
<style type="text/css">
li {
list-style: none;
float: left;
line-height: 40px;
text-align: center;
width: 120px;
height: 40px;
}
#div1{
width: 300px;
height: 300px;
background-color: #3A6587;
}
#div2{
width: 300px;
height: 300px;
background-color: whitesmoke;
display: none;
}
.liclass{
background-color: antiquewhite;
}
</style>
</head>
<body>
<ul id="hd">
<li value="1" class="liclass">1</li>
<li value="2" class="">2</li>
<div style="clear: left;"></div>
</ul>
<div id="bd">
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</div>
</body>
</html>
<script type="text/javascript">
var lis = document.getElementById("hd").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
//先让所有div隐藏，再让点击的div显示
//隐藏div
var div = document.getElementById("bd").getElementsByTagName("div");
for(var y=0;y<div.length;y++){
div[y].style.display = "none";
}
//去除li标签样式
var ls = document.getElementById("hd").getElementsByTagName("li");
for(var m=0;m<ls.length;m++){
ls[m].className = "";
}
//获取样式
this.className = "liclass";
for(var n=0;n<ls.length;n++){
document.getElementById("div"+this.value).style.display = "block";
}
}
}
</script>
图片轮播
在页面加载完成时，启动计时器，每一秒执行一次图片切换函数。
当鼠标停留在按钮和图片上时，停止计时器。鼠标离开时，开启计数器。
<html>
<head>
<style>
#bd_center_first_center{
background-color: whitesmoke;
border: 1px solid #DCDCDC;
border-top:none;
border-bottom:none;
height: 210px;
}
#bd_center_first_center button{
margin: 5px 5px;
width: 15px;
height: 17px;
float: left;
}
.liClass{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<div id="bd_center_first_center">
<a href="####" id="a" target="_blank"><img id="img" src="img/dd_scroll_3.jpg" style="margin-left: 10px; margin-top: 10px; float: left;"></a>
<button type="button" value="1" style="margin-top: 10px;" id="bd_center_first_button1" class="liClass">1</button>
<button type="button" value="2" id="bd_center_first_button2">2</button>
<button type="button" value="3" id="bd_center_first_button3">3</button>
<button type="button" value="4" id="bd_center_first_button4">4</button>
<button type="button" value="5" id="bd_center_first_button5">5</button>
<button type="button" value="6" id="bd_center_first_button6">6</button>
</div>
</body>
</html>
<script type="text/javascript">
var num=1;
var time;
function noLiCss(){
var lis=document.getElementsByTagName("button");
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
}
function imgChange(){
num++;
if(num>6){
num=1;
}
//先清除所有li的样式
noLiCss();
//显示对应的图片
document.getElementById("img").src="img/dd_scroll_"+num+".jpg";
document.getElementById("bd_center_first_button"+num).className="liClass";
}
window.onload=function(){
time=setInterval("imgChange()",1000);
}
//给所有 li绑定鼠标移入事件
var lis=document.getElementsByTagName("button");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
//清除定时器
clearInterval(time);
noLiCss();
this.className="liClass";
document.getElementById("img").src="img/dd_scroll_"+this.value+".jpg";
num=this.value;
}
lis[i].onmouseout=function(){
time=setInterval("imgChange()",1000);
}
}
//给图片加鼠标移入移出事件
document.getElementById("img").onmouseover=function(){
clearInterval(time);
}
document.getElementById("img").onmouseout=function(){
time=setInterval("imgChange()",1000);
}
</script>
内容无缝滚动
<html>
<head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#all{
width: 300px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
#express{
margin-left: 50px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1">
<ul id="express">
<li>·..........开始.........</li>
<li>·2010考研英语大纲到货75折...</li>
<li>·权威定本四大名著（人民文...</li>
<li>·*权威唐德刚先生国...</li>
<li>·袁伟民与体坛风云：实话实...</li>
<li>·我们*这些年：轰动两岸...</li>
<li>·畅销教辅推荐：精品套书50...</li>
<li>·2010版法律硕士联考大纲75...</li>
<li>·计算机新书畅销书75折抢购</li>
<li>·2009年孩子最喜欢的书>></li>
<li>·弗洛伊德作品精选集59折</li>
<li>·..........结束.........</li>
</ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>
<script type="text/javascript">
//将div1中的内容复制到div2
document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML;
var time =setInterval(function(){
var all=document.getElementById("all");
var div1=document.getElementById("div1");
if(all.scrollTop>div1.offsetHeight){
all.scrollTop=0;
}else{
all.scrollTop++;
}
},10);
</script>