当前位置:企业首页 >> 新闻中心

分享到： 更多

最简单的仅几行代码无缝滚动代码

发布时间:2011-11-12 20:00　点击量:

最简单的仅几行代码无缝滚动代码呵呵，其实不能算是滚动效果，只能算是跳动播放。不过代码确实够简洁，创意也不错。

1.文字的滚动：
<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
  <a href="javascript:">1,你可曾有过无数的梦想，</a>
  <a href="javascript:">2,却在时光的流逝里幻灭 </a>
  <a href="javascript:">3,你可曾对未来期待憧憬，</a>
  <a href="javascript:">4,却在成长的岁月中迷失</a>
  <a href="javascript:">5,CSDN中国程序员论坛</a>
  <a href="javascript:">6,大家一起来</a>
  <a href="javascript:">7,好象都很不错的样子</a>
</div>

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

上面显示的是四行，如果只要1行，或者几行  改这里height:68px
只显示1行：<div id="div1" style="width:300px;height:15px;overflow:hidden">

修改一下：
<ul id="ScrollBox" style="width:300px;height:80px;overflow:hidden;margin:0;padding:0;line-height:20px;font-size:12px;">
<li>1.你可曾有过无数的梦想，</li>
<li>2.却在时光的流逝里幻灭 </li>
<li>3.你可曾对未来期待憧憬，</li>
<li>4.却在成长的岁月中迷失</li>
<li>5.CSDN中国程序员论坛</li>
<li>6.大家一起来</li>
<li>7.好象都很不错的样子</li>
</ul>
<script type="text/javascript">
var t=setInterval(myfunc,1000);
var oBox=document.getElementById("ScrollBox");
function myfunc(){
var o=oBox.firstChild
oBox.removeChild(o)
oBox.appendChild(o)
}
oBox.onmouseover=function(){clearInterval(t)}
oBox.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>


2.图片滚动
<style>img{display:block}</style>
<div id="div1" style="width:221px;height:187px;overflow:hidden">
<img src=http://www.dzhai.com/blog/images/logo.gif>
<img src=http://www.dzhai.com/so/images/logo.gif>
<img src=http://www.dzhai.com/web/image/logo2.gif>
<img src=http://www.chinaitweb.com/uploads/allimg/111112/200403B12-3.gif>
</div>

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

只需要修改几个字符，就可以横着滚
<div id="div1" style="width:884px;height:187px;overflow:hidden">
<img src=http://www.dzhai.com/blog/images/logo.gif>
<img src=http://www.dzhai.com/so/images/logo.gif>
<img src=http://www.dzhai.com/web/image/logo2.gif>
<img src=http://www.chinaitweb.com/uploads/allimg/111112/200403B12-3.gif>
</div>

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,500)}
</script>

(责任编辑：msh8888)