已解决，请斑竹锁贴。有没有代码大神，进来帮忙解决一下

显示全部楼层 · 发表于 2014-11-13 11:24:21

本帖最后由 andyandyw 于 2014-11-15 15:59 编辑

我想在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}
#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>

显示全部楼层 · 发表于 2014-11-13 12:30:37

笨办法就是table建立真正的表格双列，内容放进去。再仿写js，它写demo123，你就写demo456。
它好像是通过判断顶部高度来实现的，所以只能横着放，竖着放第二列的顶部高度就不对头了。
或者合并两列文字，当一行处理。
跑马灯耗CPU大，最好少用。

显示全部楼层 · 发表于 2014-11-13 13:02:18

滚动，我记得可以不用代码直接添加的吧。

显示全部楼层 · 发表于 2014-11-13 13:20:28

随便注册发表于 2014-11-13 12:30
笨办法就是table建立真正的表格双列，内容放进去。再仿写js，它写demo123，你就写demo456。
它好像是通过 ...

此方法试过了，没用

显示全部楼层 · 发表于 2014-11-13 13:21:15

advance2013 发表于 2014-11-13 13:02
滚动，我记得可以不用代码直接添加的吧。

你说的不是无缝循环滚动吧

显示全部楼层 · 发表于 2014-11-13 13:22:00

算了，头大了，不搞了，谢谢各位

显示全部楼层 · 发表于 2014-11-13 14:01:19

本帖最后由随便注册于 2014-11-13 14:11 编辑

andyandyw 发表于 2014-11-13 13:20
此方法试过了，没用

其实如不要求无缝循环滚动，用HTML的marquee标签就好，虽然老，但都能用。也能鼠标移上停止，移开继续。但耗CPU差不多。
这是那个笨办法

显示全部楼层 · 发表于 2014-11-13 16:32:41

这个，，，算了还得解释代码是什么意思

显示全部楼层 · 发表于 2014-11-13 22:19:45

本帖最后由翼风Fly 于 2014-11-13 22:20 编辑

不知道楼主怎么复制的。。。复制的时候记得把变量名改掉，变量冲突后就乱套了，比方说这样：
[mw_shl_code=html,true]<!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
}
#demo1, #qwe1, #demo2, #qwe2 {
height: auto;
text-align: left;
}
#demo1 li, #demo2 li, #qwe1 li, #qwe2 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>
(function () {
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>

<div id="qwe" style="overflow:hidden;height:80px;width:280px;">
  <ul id="qwe1">
<li>卡饭</li>
<li>翼·风</li>
<li>翼风Fly</li>
<li>呦呦切克闹</li>
<li>煎饼果子来一套</li>
<li>翼·风</li>
<li>翼风Fly</li>
<li>呦呦切克闹</li>
<li>煎饼果子来一套</li>
  </ul>
  <div id="qwe2"></div>
</div>
<script>
(function () {
var speed=40
var qwe=document.getElementById("qwe");
var qwe2=document.getElementById("qwe2");
var qwe1=document.getElementById("qwe1");
qwe2.innerHTML=qwe1.innerHTML
function Marquee(){
if(qwe2.offsetTop-qwe.scrollTop<=0)
  qwe.scrollTop-=qwe1.offsetHeight
else{
  qwe.scrollTop++
}
}
var MyMar2=setInterval(Marquee,speed)
qwe.onmouseover=function() {clearInterval(MyMar2)}
qwe.onmouseout=function() {MyMar2=setInterval(Marquee,speed)}
})()
</script>
</body>
</html>[/mw_shl_code]

显示全部楼层 · 发表于 2014-11-13 23:17:14

翼风Fly 发表于 2014-11-13 22:19
不知道楼主怎么复制的。。。复制的时候记得把变量名改掉，变量冲突后就乱套了，比方说这样：
[mw_shl_code ...

还是你厉害，改了不少。发现第二组的<li></li>必须比第一组多才行，第一组有7个<li></li>，第二组至少得8个，不然过两轮就停了？

[已解决] 已解决，请斑竹锁贴。有没有代码大神，进来帮忙解决一下

本帖子中包含更多资源

评分