Js动态效果

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>
上一篇:034、javascript 操作元素 05、.click()点击元素 .value(“text”) 输入文本 .value(“”) 清空文本


下一篇:tsconfig 配置文件(egret项目)