jquery实现字幕效果(文本或图片的水平和垂直滚动)

最初，在前端html代码中，文本或图片的水平和垂直滚动都是使用字幕完成的。然而，考虑到浏览器兼容性和符合w3c标准，它是通过使用javascript代码实现的。后来，我爱上了jquery。希望以下内容对初学者有所帮助。高手不宜喷，但欢迎指导。谢谢您们。原理：无缝轧制的原理是用两个内容物相同的容器来欺骗人的视觉。然后，通过将整个容器的滚动条从左向右或上下移动来实现滚动。下面附上一张手绘图片，简要说明原理。首先，我们的目标是实现框1中的内容水平向左滚动(向右滚动，上下滚动的原理大致相同，只要我们知道其中一个，另一个就不成问题。)。然后在加载页面时，我们使用js动态地将框2中的内容(html内容)分配为与框1中的内容相同。然后，随着滚动条逐渐向右移动，达到向左的效果。说了这么多。代码(带注释)将在后面附上。

1.html码复制码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-transition . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title juqery实现了字幕/标题脚本src=' http 3360 jquery-1 . 4 . 2 . js ' type=' text/JavaScript '/的效果*/{ width :600 px；高度：80 px；飞越：隐藏；} # longwidth { height:80px宽度：1000%；/*它应该足够大，能够容纳div1和div2。否则，因为float:left不适合，它将转到第二行*/}。kuang { float:left高度：80 px；}/style script type=' text/JavaScript ' $(function(){ $(' # div 2 ')。html($('#div1 ')。html())；//将div2的html设置为html varmar=function(){ if($(' # container ')。scrollleft () $ ('# div1 ')。width()){//当滚动条的隐藏长度大于div 1 $(“# container”)的宽度时。scrolleft(0。} else { $('#container ')。scrolleft($(' # container ')。scrolleft(5)；//每次滚动条向右移动1px；} };var vid=setInterval(mar，1)；$('#container ')。mouse enter(function(){ clearInterval(vid))；}).mouse leave(function(){ vid=SetInterval(mar，1)；});});/剧本/头身！-container可以使用div，content可以使用ul li，所以box 1是div1，box 2是div2，如果一行需要两个div，就需要设置div-的float:left属性！-当然，如果你不太懂css，也可以用table，td1，td2。我不喜欢表，所以我通过div-div id=' container ' div id=' long width ' div id=' div 1 ' class=' kwang ' img src=' http :04 . jpg ' width=' 120 px ' height=' 80px '/img src=' http 336004 . jpg ' width=' 120 px ' height=' 80px '/img src=' http :04 '来做。