87,989
社区成员
发帖
与我相关
我的任务
分享文字滚动效果
我想做出www.265.com 搜索栏下那种滚动效果
但我只能做出一行只有一个词那种 怎样才能实现一行多词翻滚
*******************************************************
网页是php生成静态的
<{foreach from = $advert_search_footer item = i}><li><{$i.code}></li><{/foreach}>
其中<{$i.code}>是带有链接的文字
但我只能做出一行只有一个词那种 怎样才能实现一行多词翻滚
*******************************************************
网页是php生成静态的
<{foreach from = $advert_search_footer item = i}><li><{$i.code}></li><{/foreach}>
其中<{$i.code}>是带有链接的文字
...全文
请发表友善的回复…
发表回复
wey524 2011-07-08
- 打赏
- 举报
已经找到方法了 但也谢谢大家
wey524 2011-07-07
- 打赏
- 举报
没人会么
lsw645645645 2011-07-07
- 打赏
- 举报
这种？
<!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>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var current = 1;
var lineHeight = 30; //行高
var id = '#marquee';//id
var speed = 3000;//速度
var stopTime = 1000;//停顿时间
function marquee() {
var count = $(id + '>li').length;
var prev = null;
$(id + '>li').each(function () {
$(this).animate({ top: prev == null ? '-' + lineHeight + 'px' : prev.css('top') }, speed, '', function () {
current++;
});
prev = $(this);
});
if (current >= count) {
var topElem = $(id + '>li').eq(0).clone();
topElem.css({ top: lineHeight + 'px' }).appendTo($(id));
$(id + '>li').eq(0).remove();
current = 1;
}
}
$(id + '>li').each(function (i) {
$(this).css({ position: 'absolute', top: i * lineHeight + 'px' });
});
setInterval(marquee, speed+stopTime);
});
</script>
<style type="text/css">
*
{
margin:0px;
top:0;
}
li
{
list-style:none;
display:inline;
line-height:30px;
}
#marquee
{
list-style:none;
padding:0px;
position:relative;
}
</style>
</head>
<body>
<div style="margin:10px auto;width:500px;height:30px;border:1px solid #ccc; overflow:hidden; ">
<ul id="marquee">
<li>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</li>
<li>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</li>
<li>
<ul>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
</ul>
</li>
</ul><!--end of marquee-->
</div><!--end of box-->
</body>
</html>
wey524 2011-07-07
- 打赏
- 举报
[Quote=引用 5 楼 lsw645645645 的回复:]
参考
http://remysharp.com/demo/marquee.html
[/Quote]
注意审题
参考
http://remysharp.com/demo/marquee.html
[/Quote]
注意审题
lsw645645645 2011-07-07
- 打赏
- 举报
参考
http://remysharp.com/demo/marquee.html
http://remysharp.com/demo/marquee.html
wey524 2011-07-05
- 打赏
- 举报
[Quote=引用 2 楼 aspwebchh 的回复:]
HTML code
<!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>
<title>CS……
[/Quote]
那<{$i.code}>该添在哪里
HTML code
<!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>
<title>CS……
[/Quote]
那<{$i.code}>该添在哪里
挨踢直男 2011-07-05
- 打赏
- 举报
<!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>
<title>CSDN 社区中心</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://forum.csdn.net/PointForum/ui/styles/list.css" />
<script type="text/javascript" src="http://counter.csdn.net/a/js/AreaCounter.js"></script>
</head>
<body onload="announcementScroll()">
<script type="text/javascript">
try { document.domain = "csdn.net"; } catch (ex) { }
function delDomain(url) {
return ("" + url).toLowerCase().replace(/http:\/\/[^\/]+/, "");
}
function iframeAutoFit() {
if (parent) {
var iframes = parent.document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
if (delDomain(iframes[i].src) == delDomain(location.href)) {
iframes[i].style.height = "26px";
}
}
}
}
if (document.attachEvent) window.attachEvent("onload", iframeAutoFit);
else window.addEventListener('load', iframeAutoFit, false);
</script>
<div class="chal">
<div class="conts" style="border:0;">
<div id="ann" onmouseover="annstop = 1" onmouseout="annstop = 0">
<div id="annbody" style="border-top:0px;">
<ul id="annbodylis">
<script src="http://ping.csdn.net/rsscache.aspx?rssurl=http://temp.csdn.net/Feed.aspx?Column=60389665-6496-440d-943d-6b1bb6d44971&count=6&area=223" type="text/javascript"></script>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var lis = $("annbodylis").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
switch (i % 3) {
case 1:
lis[i].className = "cen";
break;
case 2:
lis[i].className = "rig";
break;
}
}
/*文字广告滚屏JS*/
var anndelay = 3000;
var annst = 0;
var annstop = 0;
var annrowcount = 0;
var anncount = 0;
var annrows = new Array();
var annstatus;
function announcementScroll() {
var annlis = $('annbody').getElementsByTagName("li");
if (annstop) {
annst = setTimeout('announcementScroll()', anndelay);
return;
}
if (!annst) {
var lasttop = -1;
for (i = 0; i < annlis.length; i++) {
if (lasttop != annlis[i].offsetTop) {
if (lasttop == -1) {
lasttop = 0;
}
annrows[annrowcount] = annlis[i].offsetTop - lasttop;
annrowcount++;
}
lasttop = annlis[i].offsetTop;
}
if (annrows.length == 1) {
$('ann').onmouseover = $('ann').onmouseout = null;
} else {
annrows[annrowcount] = annrows[1];
$('annbodylis').innerHTML += $('annbodylis').innerHTML;
annst = setTimeout('announcementScroll()', anndelay);
}
annrowcount = 1;
return;
}
if (annrowcount >= annrows.length) {
$('annbody').scrollTop = 0;
annrowcount = 1;
annst = setTimeout('announcementScroll()', anndelay);
} else {
anncount = 0;
announcementScrollnext(annrows[annrowcount]);
}
}
function announcementScrollnext(time) {
$('annbody').scrollTop++;
anncount++;
if (anncount != time) {
annst = setTimeout('announcementScrollnext(' + time + ')', 10);
} else {
annrowcount++;
annst = setTimeout('announcementScroll()', anndelay);
}
}
</script>
</body>
</html>csdn有现成的，直接拿来用就行了
sh_js 2011-07-05
- 打赏
- 举报
放tr里面 里面再几个td。。。
