分享

文字列表无缝向上滚动JavaScript代码

 ☆無心插柳☆ 2013-08-30
JavaScript控制Li文字列表无缝向上滚动,鼠标经过时暂停,常用的滚动效果,滚动速度、滚动区域的在小请分别在JS代码及CSS里调整。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字列表无缝向上滚动JavaScript代码</title>
<style>
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
#demo2  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;height:80px;width:280px;">
<ul id="demo1">  
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li><li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li><li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li><li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li><li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li><li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li><li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>
</ul> 
<div id="demo2"></div>
</div> 
<script> 
var speed=40 
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
  demo.scrollTop-=demo1.offsetHeight 
else{ 
  demo.scrollTop++ 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script> 
</body>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多