其实这种js控制文本上下不间断滚动的例子不少,但是常常找的不是想要的。不是代码过于冗余就是效果不尽人意,再有就是每次用到都要去找,这也是鄙人缺乏条理性的一个显著特征。今天找到一个代码简洁,效果也不错的一个特效,所以就发上来分享加备份~
首先是css代码:
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:25px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
其次是js代码:
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//当前滚动的位置
critical = slide.offsetHeight;//临界点
slide.innerHTML = slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta+"px";
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时,清除定时器,停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
最后就要滚动的部分:
<ul id="marquee">
<li>
<a href="#">纤云弄巧,飞星传恨,银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢,便胜却、人间无数。</a><br />
<a href="#">柔情似水,佳期如梦。忍顾鹊桥归路!</a><br />
<a href="#">两情若是久长时,又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫,百世难,亘古匆匆,弹指间!</a><br />
<a href="#">不死躯,不灭魂,震古烁今,无人敌!</a><br />
<a href="#">待到阴阳逆乱时,以我魔血染青天!</a><br />
</li>
</ul>
分享到:
相关推荐
javascript 间断和不间断文本滚动效果
不间断滚动(js封装类,javascript,不间断,滚动,scroll)
JS实现公告上线滚动效果 本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下 实现的效果如下,新闻公告上下滚动。 代码: <!DOCTYPE html> <html lang="en"> <head> ...
JS不间断向上滚动
JS实现图片的不间断连续滚动
通过js实现的新闻列表的滚动效果 效果为连续滚动
jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐
JS无间断图片循环滚动效果html版 JS无间断 图片循环 JS滚动效果 无间断滚动
效果展示 (鼠标移入,滚动停止;鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图: (红色边框...
js实现鼠标点击 图片无间断横向滚动。效果比较好!
图片不间断向左滚动,找了一下午,终于找到了!
JS不间断向左滚动javascript无缝隙
2种方式实现:上下不间断轮播的新闻滚动效果代码。 1.原生js实现方式; 2.jquery实现方式;
不间断滚动图片js代码。利用javascript实现,图片添加到一定条数才会不间断滚动
不间断无缝滚动图片 不间断 无缝 滚动图片效果 js 动态
js实现漂亮的图片平滑滚动效果
用JavaScript+CSS写的一款实现图片不间断滚动的效果
Javascript实现图片不间断滚动的代码_.docx
一个很好调用的JS不间断图片流动效果,两个JS文件,很好用的。