84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
需要做一个文字跑马灯效果,而且需要不间断,循环。也就是一段文字。那个非主流标签<marquee>暂时不考虑,兼容性问题。想采用图片轮播效果,把子节点clone一个,造成无缝隙轮播,但是文字不像图片,定时切换,我需要滚动。脑袋进程阻塞,没有思路。求大家知道一二。
<marquee>
clone
认证高级PHP讲师
你这个思路没问题啊,一段文字都放在span里面,span包在一个p里,p的宽高固定,样式设置正确后,改变span的位置实现滚动,剩下的就是计算了(没敲代码,就大概想了一下,觉得可行)。
<p> <span><span> <span class="cloned"><span> </p>
百度找的一个Demo还是可以用的,不错。可以学习学习。
<!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=utf-8" /> <title>js文字向左无缝滚动</title> </head> <body> <style type="text/css"> .qimo8 { margin: 0 auto; overflow: hidden; width: 200px; } .qimo8 .qimo { width: 200%; height: 30px; } .qimo8 .qimo p { float: left; } .qimo8 .qimo ul { float: left; height: 30px; overflow: hidden; zoom: 1; } .qimo8 .qimo ul li { float: left; line-height: 30px; list-style: none; } .qimo8 li a { margin-right: 10px; color: #444444; } </style> <p> <p id="demo" class="qimo8"> <p class="qimo"> <p id="demo1"> <ul class="loop"> <li>2016年第一盏祝福之灯</li> </ul> </p> <p id="demo2"></p> </p> </p> </p> <script type="text/javascript"> var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML = document.getElementById("demo1").innerHTML; function Marquee() { if (demo.scrollLeft - demo2.offsetWidth >= 0) { demo.scrollLeft -= demo1.offsetWidth; } else { demo.scrollLeft++; } } var myvar = setInterval(Marquee, 30); demo.onmouseout = function() { myvar = setInterval(Marquee, 30); } demo.onmouseover = function() { clearInterval(myvar); } </script> </body> </html>
根据 轮播的 思路是对的 http://jsbin.com/punevu/edit?html,output可以看一下代码 这里时间有限没有写注释 如果有问题请评论
你这个思路没问题啊,一段文字都放在span里面,span包在一个p里,p的宽高固定,样式设置正确后,改变span的位置实现滚动,剩下的就是计算了(没敲代码,就大概想了一下,觉得可行)。
百度找的一个Demo还是可以用的,不错。可以学习学习。
根据 轮播的 思路是对的
http://jsbin.com/punevu/edit?html,output
可以看一下代码 这里时间有限没有写注释 如果有问题请评论