求在div代码里加入js滚动效果

chenxhcc 2009-04-24 08:08:31 
 <!-- 首页及商品列表页面团购部分模板 -->

<!-- {if $group_buy_goods.data or $editing} -->

<div id="group_buy" class="colbox">

  <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>

  <div class="colboxcontent">

    <ul>

      <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->

      <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->

      <li>

        <a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>

        <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>

      </li>

      <!-- {/if} -->

      <!-- {/foreach} 团购商品 -->

    </ul>

  </div>

  <div class="colbtm"></div>

</div>

<!-- {/if} -->


在这段代码里加入从右往左滚动的效果.要求点击图片停止.移开接着滚动.
...全文
1372 36 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
chenxhcc 2009-05-07
  • 打赏
  • 举报
 回复 
<!-- 首页及商品列表页面团购部分模板 -->

<!-- {if $group_buy_goods.data or $editing} -->

<div id="group_buy" class="colbox">

  <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>

  <div class="colboxcontent">















<div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">

    <table align="left" cellpadding="0" cellspace="0" border="0">

      <tr>

        <td id="demo1" valign="top"><table border="0" cellpadding="0" cellspacing="0">

            <tr>

                  <ul>

      <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->

      <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->

      <li>

      <a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>

      <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>

      < >

      <!-- {/if} -->

      <!-- {/foreach} 团购商品 -->

    </ul>

			

            </tr>

        </table></td>

        <td id="demo2" valign="top"></td>

      </tr>

    </table>

</div>

  </div>

  <div class="colbtm"></div>

</div>

<!-- {/if} -->





<script>

  var speed=8//速度数值越大速度越慢

  document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

  function Marquee(){

      if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

        document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

      else{

        document.getElementById("demo").scrollLeft++

      }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function(){clearInterval(MyMar)}

  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

</script>
chenxhcc 2009-04-25
  • 打赏
  • 举报
 回复 
<!-- 首页及商品列表页面团购部分模板 -->

<!-- {if $group_buy_goods.data or $editing} -->

<div id="group_buy" class="colbox">

  <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>

  <div class="colboxcontent">

    <ul>

      <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->

      <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->

      <li>

        <a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>

        <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>

      </li>

      <!-- {/if} -->

      <!-- {/foreach} 团购商品 -->

    </ul>

  </div>

  <div class="colbtm"></div>

</div>

<!-- {/if} -->



为上面这段代码求图片无缝滚动效果。 上面的一些代码留白的不行，还有一些是我不会套用。 是否有人帮我修改下上面的这段代码。使上面的这段代码里的图片实现无缝滚动。从左或从左全行。 因为图行是左右排行的。
街头小贩 2009-04-25
  • 打赏
  • 举报
 回复
对不起！贴错了!
街头小贩 2009-04-25
  • 打赏
  • 举报
 回复
转一个uch的:


function startMarquee(h, speed, delay, sid) {

	var t = null;

	var p = false;

	var o = $(sid);

	o.innerHTML += o.innerHTML;

	o.onmouseover = function() {p = true}

	o.onmouseout = function() {p = false}

	o.scrollTop = 0;

	function start() {

	    t = setInterval(scrolling, speed);

	    if(!p) {

			o.scrollTop += 2;

		}

	}

	function scrolling() {

	    if(p) return;

		if(o.scrollTop % h != 0) {

	        o.scrollTop += 2;

	        if(o.scrollTop >= o.scrollHeight/2) o.scrollTop = 0;

	    } else {

	        clearInterval(t);

	        setTimeout(start, delay);

	    }

	}

	setTimeout(start, delay);

}


html代码:


<ul class="line_list" id="scrollbody" style="height: 250px; overflow:hidden;">



<li><a href="space-1119304.html">领航礼品</a>又往好友的<a href="userapp.php?id=1021978&my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>里使坏。</li>

<li><a href="space-1118813.html">小天UV灯</a> 正在“<a href="userapp.php?id=1016668&my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">笑傲江湖</a>”里打拼</li>

<li><a href="space-1118813.html">小天UV灯</a> 在 <a href="userapp.php?id=1011554&my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">超级大富翁</a> 中进行了买卖</li>



<li><a href="space-729898.html">中国一号网</a> 在 <a href="userapp.php?id=1011554&my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">超级大富翁</a> 中进行了买卖</li>

<li><a href="space-1125151.html">环球筛网</a> 今天登录<a href="userapp.php?id=1003094&my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">争车位</a>游戏获赠200元游戏币！</li>

<li><a href="space-1125151.html">环球筛网</a> 和 <a href="space-1128136.html">mytaffy</a> 成为了好友</li>



<li><a href="space-1119304.html">领航礼品</a>的勤劳有了回报，TA的<a href="userapp.php?id=1021978&my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>收获了一批果实。</li>

<li><a href="space-1125151.html">环球筛网</a> 和 <a href="space-361696.html">ovovo</a> 成为了好友</li>

<li><a href="space-1107731.html">zl888</a> 今天登录<a href="userapp.php?id=1003094&my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">争车位</a>游戏获赠200元游戏币！</li>



<li><a href="space-1119292.html">金杉密封</a>又往好友的<a href="userapp.php?id=1021978&my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>里使坏。</li>

</ul>

<script>startMarquee(250, 60, 0, 'scrollbody');</script>
lihan6415151528 2009-04-25
  • 打赏
  • 举报
 回复
无缝滚动，marquee即可
参考http://blog.csdn.net/lihan6415151528/archive/2009/03/19/4003830.aspx
ws_hgo 2009-04-25
  • 打赏
  • 举报
 回复
不错
chenxhcc 2009-04-25
  • 打赏
  • 举报
 回复
我的天啊。怎么没人回答呢？ 呵~
chenxhcc 2009-04-25
  • 打赏
  • 举报
 回复
还未解决
robyjeffding 2009-04-25
  • 打赏
  • 举报
 回复
upupup!
lsd123 2009-04-25
  • 打赏
  • 举报
 回复
.
shenchendt 2009-04-24
  • 打赏
  • 举报
 回复
<DIV id=marquee3 style="OVERFLOW: hidden; WIDTH:920px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD id=marquee3_1>
<TABLE cellSpacing=0 cellPadding=0 width="920px" border=0>
<TBODY>
<TR >
<TD
style="PADDING-RIGHT: 2px; PADDING-LEFT:2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/1.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT:2px; PADDING-LEFT:2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/2.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><a
href="#"><img
src="uploadfile/3.jpg"
width=120 height=80 border="0"
class=p></a></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/4.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/5.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV><A
href="#"><IMG
src="uploadfile/6.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/8.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD>
<TD
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
<DIV align="center"><A
href="#"><IMG
src="uploadfile/7.jpg"
width=120 height=80 border="0"
class=p></A></DIV>
<DIV style="PADDING-TOP: 5px" align="center"><A
href="#">校园风采</A></DIV></TD></TR></TBODY></TABLE></TD>
<TD id=marquee3_2></TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=javascript>
var marqueeVar3;
document.getElementById('marquee3_2').innerHTML = document.getElementById('marquee3_1').innerHTML;
marqueeVar3 = window.setInterval("marquee(3, 'right')", 20);
document.getElementById('marquee3').onmouseover = function(){window.clearInterval(marqueeVar3);}
document.getElementById('marquee3').onmouseout = function(){marqueeVar3 = window.setInterval('marquee(3, "right")', 20);}


function marquee(i, direction)
{
var obj = document.getElementById("marquee" + i);
var obj1 = document.getElementById("marquee" + i + "_1");
var obj2 = document.getElementById("marquee" + i + "_2");

if (direction == "up")
{
if (obj2.offsetTop - obj.scrollTop <= 0)
{
obj.scrollTop -= (obj1.offsetHeight + 20);
}
else
{
var tmp = obj.scrollTop;
obj.scrollTop++;
if (obj.scrollTop == tmp)
{
obj.scrollTop = 1;
}
}
}
else
{
if (obj2.offsetWidth - obj.scrollLeft <= 0)
{
obj.scrollLeft -= obj1.offsetWidth;
}
else
{
obj.scrollLeft++;
}
}
}
</SCRIPT>

chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复
呼唤高手中......
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复
传上去了.看看.好象还和以前一样的样子.
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复
好,我去试试
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复
好象没插对的样子。呵呵~
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复 
<!-- 首页及商品列表页面团购部分模板 -->

<!-- {if $group_buy_goods.data or $editing} -->

<div id="group_buy" class="colbox">

  <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>

  <div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">

  <div id="demo1" class="colboxcontent">

    <ul>

      <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->

      <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->

      <li>

        <a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>

        <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&act=detail&id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>

      </li>

      <!-- {/if} -->

      <!-- {/foreach} 团购商品 -->

    </ul>

  </div>

  <div id="demo2" class="colbtm" valign="top"></div>

</div>

</div>

<script>

  var speed=8//速度数值越大速度越慢

  document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

  function Marquee(){

      if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

        document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

      else{

        document.getElementById("demo").scrollLeft++

      }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function(){clearInterval(MyMar)}

  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

</script>
xiaojing7 2009-04-24
  • 打赏
  • 举报
 回复

.colboxcontent marquee ul{margin:0px;padding:0px;}
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复
我不会往放啊。 我把你给我的那段代码保存预览感觉不错。就是不知道怎么往里放。
xiaojing7 2009-04-24
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 chenxhcc 的回复:]
能不能做到无缝不留白呢?
[/Quote]
======================
你的是样式表造成的。ul li 这个你设置下！！！
chenxhcc 2009-04-24
  • 打赏
  • 举报
 回复 


<div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">

    <table align="left" cellpadding="0" cellspace="0" border="0">

      <tr>

        <td id="demo1" valign="top"><table border="0" cellpadding="0" cellspacing="0">

            <tr>

              <td><img src="indexgd/001.gif" width="143" height="200" /></td>

              <td><img src="indexgd/002.gif" width="143" height="200" /></td>

              <td><img src="indexgd/003.gif" width="143" height="200" /></td>

              <td><img src="indexgd/004.gif" width="143" height="200" /></td>

              <td><img src="indexgd/005.gif" width="143" height="200" /></td>

              <td><img src="indexgd/006.gif" width="143" height="200" /></td>

              <td><img src="indexgd/007.gif" width="143" height="200" /></td>

              <td><img src="indexgd/008.gif" width="143" height="200" /></td>

            </tr>

        </table></td>

        <td id="demo2" valign="top"></td>

      </tr>

    </table>

</div>

<script>

  var speed=8//速度数值越大速度越慢

  document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

  function Marquee(){

      if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

        document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

      else{

        document.getElementById("demo").scrollLeft++

      }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function(){clearInterval(MyMar)}

  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

</script>


怎么把这段代码加到我上面的那段代码中呢？
加载更多回复（15）
JS控制div跳转到指定的位置的几种解决方案总结
主要介绍了JS控制div跳转到指定的位置的几种解决方案总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
jQuery-实现文字无缝滚动效果.zip
jQuery文字无缝滚动效果代码下载。
js向上滚动消息框代码.zip
js向上滚动消息框代码是一款原生js封装的简单实用滚动消息框特效。
JS不间断向左滚动.rar
JS不间断向左滚动
循环向右滚动图片代码
简易的表格循环不间断滚动向右代码,简单易学.
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章