JavaScript实现文字列表无缝向上滚动
2012-11-10 21:00
871 查看
原创作品，允许转载，转载时请务必以超链接形式标明文章
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址：http://blog.csdn.net/chenghui0317/article/details/8170001
文字列表无缝向上滚动代码：
文字列表无缝横向滚动代码：
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址：http://blog.csdn.net/chenghui0317/article/details/8170001
文字列表无缝向上滚动代码：
<!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>JavaScript实现文字列表无缝向上滚动</title>
<style>
/*全局设置*/
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px;}
#marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;}
#marquee1{height:auto;}
#marquee1 li{height:22px;}
#marquee2{height:auto;}
#marquee2 li{height:22px;}
#result{width:300px;margin:10px auto;}
</style>
</head>
<body>
<!-- 其实实现原理很简单，marquee1 和marquee2 innerHTML 是一样的嘛 ，假如marquee的scrollTop++ ,那么只有marquee在往下移。恰好超过的部分隐藏，就感觉marquee没有动，而是marquee1和marquee2他们向上移动，但是实际上他们从来没有变过，关键就在于当marquee 的顶部已经到达marquee1 的底部的时候，立马将marquee的scrollTop位置还原成初始状态，这样子就感觉 两个div一直在滚个不停 -->
<div id="marquee">
<div id="marquee1">
<ul>
<li><a href="http://bbs.csdn.net/topics/390219560" style="color: red; font-weight: bold" target="_blank">微软大会2012购票享7折优惠</a></li>
<li><a href="http://bbs.csdn.net/topics/390270707" style="color: black" target="_blank">微软Silverlight 5开发书籍汇总</a></li>
<li><a href="http://bbs.csdn.net/topics/390269709" style="color: black" target="_blank">实现.Net代码生成器讨论帖</a></li>
<li><a href="http://bbs.csdn.net/topics/390262160" style="color: black" target="_blank">探讨查看SQL变更记录的方法</a></li>
<li><a href="http://www.csdn.net/article/2012-11-06/2811553" style="color: red; font-weight: bold" target="_blank">魏子钧：HTML5和JavaScript将长存</a></li>
<li><a href="http://bbs.csdn.net/topics/390272755" style="color: blue; font-weight: bold" target="_blank">Hadoop&BigData 技术赢门票活动</a></li>
<li><a href="http://hbtc2012.hadooper.cn" style="color: red; font-weight: bold" target="_blank">Hadoop与大数据精彩议题发布</a></li>
<li><a href="http://bbs.csdn.net/topics/390230868" style="color: blue; font-weight: bold" target="_blank">Cloud Foundry征文大赛进行中</a></li>
</ul>
</div>
<div id="marquee2"></div>
</div>
<div id="result"></div>
<script>
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
var speed=10;
var marquee = document.getElementById("marquee");
var marquee1 = document.getElementById("marquee1");
var marquee2 = document.getElementById("marquee2");
marquee2.innerHTML = marquee1.innerHTML;
function marqueeImpl(){
document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop;
//之后发现，这种方式不兼容所有的浏览器，比如ie6 ie7 和搜狗，他们获取的offsetTop 参照物不是父级容器，而是浏览器最外层 ，所以需要额外判断浏览器是ie6 ie7还是搜狗。
if(navigator.userAgent.toLowerCase().indexOf("metasr")!=-1 || (browser=="Microsoft Internet Explorer" && (trim_Version=="MSIE7.0" || trim_Version=="MSIE6.0"))){
if(marquee2.offsetTop - marquee.scrollTop <= 0) {
marquee.scrollTop -= marquee1.offsetHeight;
}else{
marquee.scrollTop++;
}
}else{
if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) {
marquee.scrollTop -= marquee1.offsetHeight;
}else{
marquee.scrollTop++;
}
}
}
var marqueeVal = setInterval(marqueeImpl, speed);
marquee.onmouseover = function() {
clearInterval(marqueeVal);
}
marquee.onmouseout = function() {
marqueeVal = setInterval(marqueeImpl, speed);
}
</script>
</body>
</html>文字列表无缝横向滚动代码：
<!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>JavaScript实现文字列表无缝向上滚动</title>
<style>
/*全局设置*/
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px;}
#marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;}
#marquee1{height:auto;}
#marquee1 li{height:22px;}
#marquee2{height:auto;}
#marquee2 li{height:22px;}
#result{width:300px;margin:10px auto;}
</style>
</head>
<body>
<!-- 其实实现原理很简单，marquee1 和marquee2 innerHTML 是一样的嘛 ，假如marquee的scrollTop++ ,那么只有marquee在往下移。恰好超过的部分隐藏，就感觉marquee没有动，而是marquee1和marquee2他们向上移动，但是实际上他们从来没有变过，关键就在于当marquee 的顶部已经到达marquee1 的底部的时候，立马将marquee的scrollTop位置还原成初始状态，这样子就感觉 两个div一直在滚个不停 -->
<div id="marquee">
<div id="marquee1">
<ul>
<li><a href="#" >微软大会2012购票享7折优惠</a></li>
<li><a href="#" >微软Silverlight 5开发书籍汇总</a></li>
<li><a href="#" >实现.Net代码生成器讨论帖</a></li>
<li><a href="#" >探讨查看SQL变更记录的方法</a></li>
<li><a href="#" >魏子钧：HTML5和JavaScript将长存</a></li>
<li><a href="#" >Hadoop&BigData 技术赢门票活动</a></li>
<li><a href="#" >Hadoop与大数据精彩议题发布</a></li>
<li><a href="#" >Cloud Foundry征文大赛进行中</a></li>
</ul>
</div>
<div id="marquee2"></div>
</div>
<div id="result"></div>
<script>
var speed=100;
var marquee = document.getElementById("marquee");
var marquee1 = document.getElementById("marquee1");
var marquee2 = document.getElementById("marquee2");
marquee2.innerHTML = marquee1.innerHTML;
function marqueeImpl(){
document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop;
if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) {
marquee.scrollTop -= marquee1.offsetHeight;
}else{
marquee.scrollTop++;
}
}
var marqueeVal = setInterval(marqueeImpl, speed);
marquee.onmouseover = function() {
clearInterval(marqueeVal);
}
marquee.onmouseout = function() {
marqueeVal = setInterval(marqueeImpl, speed);
}
</script>
<!--向左边无缝滚动-->
<style type="text/css">
#marquee_1{ overflow:hidden; width:815px;height:30px;}
#marquee_1 #marquee1_1 {width:200%; height:30px;}
#marquee_1 ul{float:left; height:30px; }
#marquee_1 ul li{float:left; line-height:30px;}
#marquee_1 li a{margin-right:30px;color:#444444;}
</style>
<div id="marquee_1">
<div id="marquee1_1">
<ul>
<li><a href="#" >回收站里的文件删除了怎么恢复</a></li>
<li><a href="#" >c盘哪些文件可以删除 系统就越来越慢怎么办</a></li>
<li><a href="#" >电脑输入法切换不了怎么办</a></li>
<li><a href="#" >PC是什么意思 </a></li>
<li><a href="#" >注册表怎么打开 电脑注册表在哪里打开</a></li>
<li><a href="#" >什么浏览器速度最快 什么浏览器最安全</a></li>
<li><a href="#" >1m等于多少kb 1MB等于多少KB</a></li>
<li><a href="#" >ppap.exe是什么进程</a></li>
</ul>
</div>
<div id="marquee2_1"></div>
</div>
<script type="text/javascript">
var marquee_1 = document.getElementById("marquee_1");
var marquee1_1 = document.getElementById("marquee1_1");
var marquee2_1 = document.getElementById("marquee2_1");
marquee2_1.innerHTML=document.getElementById("marquee1_1").innerHTML;
function marqueeImpl_1(){
if(marquee_1.scrollLeft-marquee2_1.offsetWidth>=0){
marquee_1.scrollLeft-=marquee1_1.offsetWidth;
}
else{
marquee_1.scrollLeft++;
}
}
var marqueeVal_1=setInterval(marqueeImpl_1,speed);
marquee_1.onmouseover=function(){
clearInterval(marqueeVal_1);
}
marquee_1.onmouseout=function (){
marqueeVal_1=setInterval(marqueeImpl_1,speed);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript实现文字列表无缝向上滚动
- js实现文字列表无缝向上滚动
- 文字列表无缝向上滚动JavaScript代码
- js实现文字向上无缝滚动
- js实现文字列表无缝滚动效果
- 基于JS实现新闻列表无缝向上滚动实例代码
- JavaScript实现垂直向上无缝滚动特效代码
- 文字列表无缝向上滚动代码
- javascript实现文字无缝滚动
- JS实现Li列表的无缝垂直文字滚动代码
- JavaScript实现走马灯效果[无缝连接、循环滚动] 向上
- js实现文字无缝向上滚动
- jQuery插件实现文字无缝向上滚动效果代码
- javascript实现文字无缝滚动效果
- JS实现文字向上无缝滚动轮播
- JavaScript实现垂直向上无缝滚动特效
- 基于javascript实现文字无缝滚动效果
- 基于JS实现新闻列表无缝向上滚动实例代码
- jQuery插件实现文字无缝向上滚动效果代码
- 基于javascript实现文字无缝滚动效果