我在这里列出两种滚动模式:大家可以将代码拷贝到本机,建立一个html文件,直接运行就可以了。
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,男人就要对自己狠点</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>
2:整体循环上移
<div id="marquees">
<a href="#">新闻一</a><br>
<br>
<a href="#">新闻二</a><br>
<br>
<a href="#">新闻三</a><br>
<br>
<a href="#">新闻四</a><br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",30);
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
<script type="text/javascript"></script>
分享到:
相关推荐
使用一小段javascript做的滚动新闻,只要你了解了这段代码的用处,还可以结合AJAX和新闻类站点的RSS做一个实时更新、实实滚动的新闻展示效果
无缝滚动新闻的Javascript源代码
javascript 滚屏新闻代码,滚动效果
网站首页全屏banner和滚动新闻代码(jQuery),自动滚动切换,也可点击按钮切换,适合网站首页使用,兼容主流浏览器
flash+xml滚动新闻代码.zip
用Javascript实现新闻内容的水平滚动! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题...
jQuery新闻图片上下滚动切换代码.zip
仿腾讯科技滚动图片JS代码,风格大气,支持手动控制图片滚动,支持文字标题,大网站的效果就是不一样,简洁大方。
主要介绍了Javascript实现滚动图片新闻的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下 实现的效果如下,新闻公告上下滚动。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ,...
本文实例为大家分享了jQuery实现动态向上滚动的具体代码,供大家参考,具体内容如下 总结:概括滚动的新闻、字幕、图片:两个最核心功能 : 1、”永动“(infinite) 2、循环 js实现”永动“(infinite) 的...
jQuery新闻循环滚动代码.zip
主要是对利用JavaScript实现新闻滚动效果的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果,下面就介绍一下文字垂直滚动的javascript代码。 javascript代码如下: <!DOCTYPE html> <html> <head> <meta charset...
jQuery新闻列表滚动下一级代码.zip
我们在很多大型门户网站都会有看到有些一热点新闻都会一直向上滚动,下面我就来给大家推荐一款Javascript中热点新闻滚动特效代码,有需要了解的朋友可以参考一下
77:FLASH+XML迅雷影片广告特效下载 78:韩国购物网FLASH滚动广告下载 79:Flash+XML滚动新闻代码下载 80:西安腾讯网flash焦点广告下载 81:四屏flash图片轮换代码下载 82:图片渐变轮换焦点图效果下载 83:CSS写的...
77:FLASH+XML迅雷影片广告特效下载 78:韩国购物网FLASH滚动广告下载 79:Flash+XML滚动新闻代码下载 80:西安腾讯网flash焦点广告下载 81:四屏flash图片轮换代码下载 82:图片渐变轮换焦点图效果下载 83:CSS写的...