无缝滚动制作js文字无缝滚动和js图片无缝滚动



98 388 130



特效描述:无缝滚动制作 文字无缝滚动 图片无缝滚动,无缝滚动制作多种无缝滚动效果js文字无缝滚动和js图片无缝滚动,直接复制副本标签js无缝滚动代码。内含js代码下载。

代码结构

1. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
a,img{border:0;}
.scroll{height:300px;width:500px;margin:50px auto;border:solid 1px #ddd;}
.scroll p{line-height:28px;padding:5px 0;border-bottom:dashed 1px #ddd;text-align:center;}
.scroll p a{color:#3366cc;text-decoration:none;}
</style>
<script type="text/javascript">
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(window,'load',initScrolling);
var scrollingBox;
var scrollingInterval;
var reachedBottom=false;
var bottom;
function initScrolling(){
	scrollingBox = document.getElementById('xst');
	scrollingBox.style.overflow = "hidden";
	scrollingInterval = setInterval("scrolling()",50);
	scrollingBox.onmouseover = over;
	scrollingBox.onmouseout = out; 
}
function scrolling(){
	var origin = scrollingBox.scrollTop++;
	if(origin == scrollingBox.scrollTop){
		if(!reachedBottom){
			scrollingBox.innerHTML+=scrollingBox.innerHTML;
			reachedBottom=true;
			bottom=origin;
		}else{
			scrollingBox.scrollTop=bottom;
		}
	}
}
function over(){
	clearInterval(scrollingInterval);
}
function out(){
	scrollingInterval = setInterval("scrolling()",50);
}
</script>
<div class="scroll" id="xst">
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p>
	<p><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/1.jpg" /></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></p>
	<p><img width="150" height="150" alt="js文字滚动制作js scroll单排文字滚动向上间隔滚动" src="images/2.jpg" /></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
	<p><img width="150" height="150" alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="images/3.jpg" /></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></p>
	<p><img width="150" height="150" alt="jquery 文字特效霓虹灯文字效果使用jQuery和CSS" src="images/4.jpg" /></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></p>
	<p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js文字滚动插件制作双行关联向上文字间隙滚动</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词
热门下载


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到