这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!--Quirks Mode-->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type">
- <title>
- Fifty Studio│无间断滚动的新闻文章列表
- </title>
- <link rel="stylesheet" type="text/CSS" href="/tutorials/demo/css/main.css"
- />
- <!--[if IE]>
- <style>
- @import url("/tutorials/demo/css/ie.css");
- </style>
- <![endif]-->
- <style type="text/css">
- <!-- a{background:#FFF; color:#333;} a:hover{background:#FFF;color: #C00;}
- #demo ul{text-align: left; } #demo li a{line-height:2em; padding-left:1.5em;background:
- #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom:
- 1px;} #FGWrapper{width: 400px; margin:2em auto; background:#EEE;} #demo{overflow:hidden;
- width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display:
- inline;} #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;}
- #copyright{float: right;} -->
- </style>
- <noscript>
- <style type="text/css">
- #demo{overflow:auto; } }
- </style>
- </noscript>
- </head>
- <body>
- <div>
- <div>
- <img class="img-responsive" src="/img/logo.gif" width="170" height="40"
- data-src="" />
- <h1>
- CSS 布局演示 CSS Layout by Forestgan
- </h1>
- <h2 id="demo_date">
- 2006-11-1 发表
- </h2>
- </div>
- <div>
- <div>
- <div>
- <div>
- <ul>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=76"
- title="三列自适应宽度液态布局│Three Column Liquid Layouts">
- 三列自适应宽度液态布局│Three Column Liquid Layouts
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=75"
- title="Internet Explorer 7 对CSS的兼容--Box Model Changes">
- Internet Explorer 7 对CSS的兼容--Box Model Changes
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74"
- title="未知大小的图片在一个已知大小容器中的水平和垂直居中(二)">
- 未知大小的图片在一个已知大小容器中的水平和垂直居中(二)
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73"
- title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">
- 为不同的浏览器载入不同CSS的二种方法CSS Browser Selector
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72"
- title="用ASP程序模拟实现first-child的功能">
- 用ASP程序模拟实现first-child的功能
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71"
- title="本地检验网页是否符合标准的几种方法">
- 本地检验网页是否符合标准的几种方法
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70"
- title="Accessibility和General Developer工具">
- Accessibility和General Developer工具
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69"
- title="未知总宽度的列表菜单水平居中的解决方案">
- 未知总宽度的列表菜单水平居中的解决方案
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68"
- title="为机器人程序准备的robots.txt文件">
- 为机器人程序准备的robots.txt文件
- </a>
- </li>
- <li>
- <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67"
- title="未知大小图片在已知容器中的垂直和水平居中问题">
- 未知大小图片在已知容器中的垂直和水平居中问题
- </a>
- </li>
- </ul>
- </div>
- <div>
- </div>
- <script type="text/javascript">
- //图片无间断滚动代码,兼容IE、Firefox、Opera
- //原脚本是IE only,来自网上,作者未知
- //部分内容是由forestgan为了JS代码标准化,兼容以gecko为内核的浏览器于2006-10-30重写
- //http://www.forest53.com
- var speed = 40;
- var FGDemo = document.getElementById('demo');
- var FGDemo1 = document.getElementById('demo1');
- var FGDemo2 = document.getElementById('demo2');
- FGDemo2.innerHTML = FGDemo1.innerHTML
- function Marquee1() {
- if (FGDemo2.offsetHeight - FGDemo.scrollTop <= 0) FGDemo.scrollTop -= FGDemo1.offsetHeight
- else {
- FGDemo.scrollTop++
- }
- }
- var MyMar1 = setInterval(Marquee1, speed) FGDemo.onmouseover = function() {
- clearInterval(MyMar1)
- }
- FGDemo.onmouseout = function() {
- MyMar1 = setInterval(Marquee1, speed)
- }
- </script>
- </div>
- <div>
- <a href="http://www.forest53.com">
- Design by Forestgan
- </a>
- 文章列表无间断滚动演示
- </div>
- </div>
- </div>
- </div>
- <div>
- <address>
- 演示页面设计制作:
- <a href="http://www.forest53.com">
- Forestgan
- </a>
- 采用
- <a href="http://www.creativecommons.cn/">
- 创作共用授权
- </a>
- --署名和非商业用途
- <a href="javascript:history.back()">
- 返回前一页
- </a>
- </address>
- </div>
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- _uacct = "UA-152060-1";
- urchinTracker();
- </script>
- <noscript>
- <p>
- google-analytics
- </p>
- </noscript>
- <script src="/js/copyrightdemo.js" type="text/javascript">
- </script>
- <noscript>
- <p>
- my stat
- </p>
- </noscript>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0721/289563.html