📄 滑轮新闻页面叠加显示.html

📁 介绍了javascript的常用的函数
💻 HTML
字号:
<HTML>
	<HEAD>
		<TITLE>JavaScript Book--代码7-10</TITLE>
		<META http-equiv=Content-Type content="text/html; charset=gb2312">
		<style type="text/css">
		<!--
		BODY {
			PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
		}
		.dis {
			DISPLAY: block
		}
		.undis {
			DISPLAY: none
		}
		#cntR {
			WIDTH: 302px
		}
		#NewsTop {
			CLEAR: both; MARGIN-BOTTOM: 16px
		}
		#NewsTop P {
			FLOAT: left; LINE-HEIGHT: 21px
		}
		#NewsTop P.topTit {
			FONT-WEIGHT: bold; WIDTH: 117px
		}
		#NewsTop P.topC0 {
			BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
		}
		#NewsTop P.topC1 {
			BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
		}
		#NewsTop #NewsTop_tit {
			BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
		}
		#NewsTop #NewsTop_cnt {
			PADDING-LEFT: 32px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
		}
		#NewsTop #NewsTop_cnt A {
			COLOR: #666; TEXT-DECORATION: none
		}
		#NewsTop #NewsTop_cnt A:hover {
			COLOR: #c2130e; TEXT-DECORATION: underline
		}
		-->
		</style>
	</HEAD>
	<BODY>
	<DIV id=cntR>
		<DIV id=NewsTop>
			<DIV id=NewsTop_tit>
				<P class=topTit>新闻排行</P>   <!--数组占了0这个位置-->
				<P class=topC0>国内</P>
				<P class=topC0>国际</P>
				<P class=topC0>社会</P>
			</DIV>
			<DIV id=NewsTop_cnt>
				<SPAN title="Don't delete me"></SPAN>  <!--数组占了0这个位置-->
				<SPAN>
					<A href="#" target=_self>中央宣讲团与西藏各族各界代表座谈侧记</A><BR>
					<A href="#" target=_self>交通部全力救助东海海域遇险的巴拿马籍货船</A><BR>
					<A href="#" target=_self>400名中国高中生代表将访问日本</A><BR>
					<A href="#" target=_self>湖北省博物馆免费开放之后</A><BR>
					<A href="#" target=_self>江苏：中科院院士走进“市民学堂”谈“净土”</A><BR>
					<A href="#" target=_self>陕西一农用车与火车发生擦挂 6人死亡3人重伤</A><BR>
					<A href="#" target=_self>岷山竹子开花威胁野外大熊猫生存</A><BR>
					<A href="#" target=_self>中国工程院院士：三峡工程绝不是“生态灾难”</A><BR>
					<A href="#" target=_self>专家称传染性疾病威胁大熊猫种群安全</A><BR>
					<A href="#" target=_self>广西举办“联合国糖尿病日”宣传活动(图)</A><BR>
					<div align="right"><A href="#" target=_self>...more</A></div>
				</SPAN>
				<SPAN>
					<A href="#" target=_self>阿富汗6名部族长老遇袭身亡</A><BR>
					<A href="#" target=_self>加拿大奥比斯等举办为中国农村眼科患者筹款活动</A><BR>
					<A href="#" target=_self>一越南渔船在海南东方港西北被撞沉</A><BR>
					<A href="#" target=_self>快讯：阿富汗一部族长老车辆遇袭 6名长老死亡</A><BR>
					<A href="#" target=_self>北京欢迎您奥运图片展在加拿大蒙特利尔开展</A><BR>
					<A href="#" target=_self>巴拿马籍货船在东海海域下沉 23名船员获救</A><BR>
					<A href="#" target=_self>日本名古屋地区中国留学生举办首届运动会</A><BR>
					<A href="#" target=_self>纽约百老汇幕后人员加入罢工 剧场难撑面临关门</A><BR>
					<A href="#" target=_self>近两月来赞比西河鱼病为水酸度增加所致</A><BR>
					<A href="#" target=_self>研究发现一类镇痛药可降患帕金森氏症风险</A><BR>
					<div align="right"><A href="#" target=_self>...more</A></div>
				</SPAN>
				<SPAN>
					<A href="#" target=_self>图文：郑州闹市马路成了祭拜场</A><BR>
					<A href="#" target=_self>光棍节广州男女争“脱光”忙“失明”</A><BR>
					<A href="#" target=_self>石家庄年轻人“光棍节”里玩花样</A><BR>
					<A href="#" target=_self>北京今年结婚平均费用超过10万 八成靠父母</A><BR>
					<A href="#" target=_self>“中国光棍协会”负责人承认炒作07中国光棍榜</A><BR>
					<A href="#" target=_self>圈内人爆料汤唯电视剧片酬叫价20万元一集(图)</A><BR>
					<A href="#" target=_self>北京兴起复古婚礼 青年热衷传统文化(组图)</A><BR>
					<A href="#" target=_self>成都公开聘请100名“中小学生课业负担监督员”</A><BR>
					<A href="#" target=_self>父亲癌症晚期发帖托孤 孩子母亲称无力抚养(图)</A><BR>
					<A href="#" target=_self>图：特大玳瑁被放归大海</A><BR>
					<div align="right"><A href="#" target=_self>...more</A></div>
				</SPAN>
			</DIV>

  </DIV>
</DIV>
</BODY></HTML>
<SCRIPT language="JavaScript">
//获得有几个分类的P对象组数
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); 
//获得所有新闻显示区域的数组
var TagsCnt=document.getElementsByTagName('SPAN');
//获得新闻分类的数量
var len=Tags.length;
//默认显示哪种新闻
var flag=1;
//以下代码根据默认值flag设置正确的显示
for(i=1;i<len;i++){
	Tags[i].value = i;
	//关键点,加载鼠标事件
	//this.value即为Tags[i].value
	Tags[i].onmouseover=function(){changeNav(this.value)};   <!--为每一个标题设置了一个监听-->
	TagsCnt[i].className='undis';	  				<!--每一个标题要显示的内容 一开始设为空，不显示-->
}
Tags[flag].className='topC1';
TagsCnt[flag].className='dis';

//切换到另外一个新闻分类
function changeNav(v){	
    //将前一个以选中的类切换到不选中状态
	Tags[flag].className='topC0';
	TagsCnt[flag].className='undis';
	//设置v为当前选中分类
	flag=v;	
	//将当前选中的分类设置为选中状态
	Tags[v].className='topC1';
	TagsCnt[v].className='dis';
}
</SCRIPT>
💿 文件大小 5908 K
👤 上传用户 zergwyk
📂 所属分类 Java编程
🏷️ 相关标签

#javascript #函数
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -