上一篇
下一篇
符合标准的向上滚动的新闻文章列表
作者:zouqt 日期:2010-05-24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合标准的向上滚动的新闻文章列表</title>
<style type="text/css">
<!--
#demo ul{
text-align: left;
margin:10px;
padding:0px;
width:200px;
}
#demo ul li{
margin-left:25px;
display:block;
list-style-image:url(images/icon_01.gif);
font-size:13px;
height:26px;
padding-top:5px;
}
#demo{
overflow:hidden;
width: 232px;
height: 270px;
margin: 5px;
float: left;
display: inline;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<ul>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典 </li>
<li>zouqt-添典</li>
<li>zouqt-添典 </li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
</ul>
</div>
<div id="demo2"></div>
<script type="text/javascript">
//图片无间断滚动代码，兼容IE、Firefox、Opera
//原脚本是IE only，来自网上，作者未知
//部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器
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>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合标准的向上滚动的新闻文章列表</title>
<style type="text/css">
<!--
#demo ul{
text-align: left;
margin:10px;
padding:0px;
width:200px;
}
#demo ul li{
margin-left:25px;
display:block;
list-style-image:url(images/icon_01.gif);
font-size:13px;
height:26px;
padding-top:5px;
}
#demo{
overflow:hidden;
width: 232px;
height: 270px;
margin: 5px;
float: left;
display: inline;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<ul>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典 </li>
<li>zouqt-添典</li>
<li>zouqt-添典 </li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
<li>zouqt-添典</li>
</ul>
</div>
<div id="demo2"></div>
<script type="text/javascript">
//图片无间断滚动代码，兼容IE、Firefox、Opera
//原脚本是IE only，来自网上，作者未知
//部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器
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>
</body>
</html>
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: 212
发表评论
