这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
绝对经典的滑轮新闻显示 (javascript+CSS) 很早就有了,今天又见到,拿出来大家分享一下。。。效果如下图:
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
- <!-- saved from url=(0026)http://www.popuni.com/ -->
- <html>
- <head>
- <title>
- 绝对经典的滑轮新闻显示(javascript+css)
- </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; BACKGROUND:
- url(/upload/2007321103411941.gif) no-repeat 12px 13px; 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>
- <div>
- <div>
- <p>
- 新闻排行
- </p>
- <p>
- 国内
- </p>
- <p>
- 国际
- </p>
- <p>
- 社会
- </p>
- <p>
- 网评
- </p>
- </div>
- <div>
- <a href="#" target=_self>
- 新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河
- </a>
- <a href="#" target=_self>
- 最高法:承诺不判赖昌星死刑没有超越法律程序
- </a>
- <a href="#" target=_self>
- 物权法:满70年住宅建设用地使用权将自动续期
- </a>
- <a href="#" target=_self>
- 弟弟被妻下药毒死男子买女尸为其配阴婚(图)
- </a>
- <a href="#" target=_self>
- 揭开郑州神枪手神秘面纱 头号狙击手是近视眼
- </a>
- <a href="#" target=_self>
- 美军高官:不排除和中国发生直接军事对抗可能
- </a>
- <a href="#" target=_self>
- 浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕
- </a>
- <a href="#" target=_self>
- 西方炒作"中国航母威胁论"称05年已正式服役
- </a>
- <a href="#" target=_self>
- 女孩生活无法自理请人大代表递交安乐死议案
- </a>
- <a href="#" target=_self>
- 建设部:住房公积金制度将覆盖农民工
- </a>
- <div align="right">
- <a href="#" target=_self>
- ...more
- </a>
- </div>
- <a href="#" target=_self>
- 美华裔女兵在营房上吊死亡军方介入调查(图)
- </a>
- <a href="#" target=_self>
- 组图:美国总统布什车队被撞
- </a>
- <a href="#" target=_self>
- 梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)
- </a>
- <a href="#" target=_self>
- 孟加拉国严打贪官人人自危奔驰宝马抛弃路边
- </a>
- <a href="#" target=_self>
- 韩国将举行大规模军事演习(图文)
- </a>
- <a href="#" target=_self>
- 组图:土星最大卫星表面发现"海洋"
- </a>
- <a href="#" target=_self>
- 墨西哥缉毒行动缴获2亿美元巨额现钞(组图)
- </a>
- <a href="#" target=_self>
- 组图:全球掀起裸体抗议加拿大捕猎海豹活动
- </a>
- <a href="#" target=_self>
- 美潜艇在百慕大失踪一晚航母战群出动搜索
- </a>
- <a href="#" target=_self>
- 匈牙利20万人示威 政要被民众扔鸡蛋(组图)
- </a>
- <div align="right">
- <a href="#" target=_self>
- ...more
- </a>
- </div>
- <a href="#" target=_self>
- 深圳女工被三名男子轮奸男友目睹过程(组图)
- </a>
- <a href="#" target=_self>
- 男子珍藏一角钱"币王"价格高达1.3万(图)
- </a>
- <a href="#" target=_self>
- 青海女孩被困洗头房每天接客十几次(图)
- </a>
- <a href="#" target=_self>
- 组图:老妻少夫演绎忘年恋69岁妻子成功除皱
- </a>
- <a href="#" target=_self>
- 陕西蓝田县电视台播放淫秽影像 达10分钟左右
- </a>
- <a href="#" target=_self>
- 女子自称被大学教授诱骗同居讨要分手费(图)
- </a>
- <a href="#" target=_self>
- 组图:男女私处成造型"性"趣礼品太出格
- </a>
- <a href="#" target=_self>
- 组图:四川泸州16岁女孩打造中国第一丑女
- </a>
- <a href="#" target=_self>
- 最高法:承诺不判赖昌星死刑没有超越法律程序
- </a>
- <a href="#" target=_self>
- 深圳发现睾丸被摘男童尸体续:疑为1月前失踪
- </a>
- <div align="right">
- <a href="#" target=_self>
- ...more
- </a>
- </div>
- <a href="#" target=_self>
- 养路费征稽员强制扣车致三轮车夫惨死车轮下
- </a>
- <a href="#" target=_self>
- 20多位学者谈中医问题 方舟子遭多名专家批驳
- </a>
- <a href="#" target=_self>
- 考研女生自称揭露监考老师作弊 成绩被判零分
- </a>
- <a href="#" target=_self>
- 全国政协委员建议一户一房制引起网民热议
- </a>
- <a href="#" target=_self>
- 河南周口市6名警察将人打昏后扔下楼摔死
- </a>
- <a href="#" target=_self>
- 组图:69岁老妻除皱成功 与少夫开始新生活
- </a>
- <a href="#" target=_self>
- 青海女孩被困洗头房每天接客十几次(图)
- </a>
- <a href="#" target=_self>
- 美上将:解放军不是美军对手 导弹打不垮台湾
- </a>
- <a href="#" target=_self>
- 新疆阜康铁路桥梁坍塌导致运煤列车脱轨
- </a>
- <a href="#" target=_self>
- 铁道部回应吴敬琏质疑:春运不涨价将长期坚持
- </a>
- <div align="right">
- <a href="#" target=_self>
- ...more
- </a>
- </div>
- </div>
- <script>
- var Tags = document.getElementById('NewsTop_tit').getElementsByTagName('p');
- var TagsCnt = document.getElementById('NewsTop_cnt').getElementsByTagName('span');
- var len = Tags.length;
- var flag = 1; //修改默认值
- for (i = 1; i < len; i++) {
- Tags[i].value = i;
- 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';
- flag = v;
- Tags[v].className = 'topC1';
- TagsCnt[v].className = 'dis';
- }
- </script>
- </div>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]下载此文件
JavaScript 实现同步于本地时间的动态时间显示方法
JS+CSS 实现感应鼠标渐变显示 DIV 层的方法
JS+CSS 实现可以凹陷显示选中单元格的方法
JavaScript 实现广告的关闭与显示效果实例
分享经典的 JavaScript 开发技巧
javascript HTML+CSS 实现经典橙色导航菜单
基于 JavaScript 实现表单密码的隐藏和显示出来
javascript css 红色经典选项卡效果实现代码
javascript+css 实现单击颜色褪去效果
Javascript+CSS 实现影像卷帘效果思路及代码
Javascript+CSS 实现 Flash 动态新闻效果(pp 原创)
JavaScript+CSS 实现的可折叠二级菜单实例
来源: http://www.phperz.com/article/17/0423/289246.html