js无缝滚动广告条

来源:赵克立博客分类: HTML5 标签：js特效 jquery插件发布时间:2014-05-27 05:05:00最后更新:2014-05-27 08:48:04浏览:3561

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1758.html

更新时间：

2014-05-27 08:48:04

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.wrapdiv{ border:solid 1px #ccc; margin:100px auto; padding:0px 40px;}
</style>
<script>
(function($){
 var data={mousehover:false,conf:null,scrobj:null,scrobj1:null,scrobj2:null};
 //滚动
 var scr=function(){
 o1=data.scrobj1;
 o2=data.scrobj2;
 setInterval(function(){
 if(!data.mousehover){
 top1=parseInt(o1.css('top'));
 top2=parseInt(o2.css('top'));
 if(Math.abs(top1)>o1.outerHeight()){
 o1.css('top',o2.outerHeight()+'px');
 }else{
 o1.css('top',(--top1)+'px');
 }
 if(Math.abs(top2)>o2.outerHeight()){
 o2.css('top',o1.outerHeight()+'px');
 }else{
 o2.css('top',(--top2)+'px');
 }
 }
 },data.conf.shijian);
 }
 $.fn.myscr=function(options){
 var thissel=$(this).selector;//取传进来的选择器
                var defaults={
 'width':'200px',
 'height':'100px',
 'innerdiv':'.innerdiv',//默认内容块类
 'cycle':true,
 'shijian':90
                    };
                var opts = $.extend(defaults, options); 
 data.conf=opts;
 this.css({
 'width':opts.width,
 'height':opts.height,
 'overflow':'hidden' 
 });
 //查找里面的innerdiv
 this.css('position','relative');
 data.scrobj1=this.find(opts.innerdiv);
 data.scrobj2=this.find(opts.innerdiv).clone(true);
 data.scrobj2.appendTo(this);
 this.find(opts.innerdiv).css('position','absolute');
 this.find(opts.innerdiv).eq(0).css('top','0px');
 this.find(opts.innerdiv).eq(1).css('top',this.find(opts.innerdiv).eq(0).outerHeight()+'px');
 this.find(opts.innerdiv).hover(function(){
 data.mousehover=true;
 },function(){
 data.mousehover=false; 
 });
 scr();
 };
 })(jQuery);

</script>
</head>

<body>
<div class="wrapdiv">
	<ul class="innerdiv">
		<li>11111111111111</li>
	    <li>22222222222222</li>
	    <li>33333333333333</li>
	    <li>44444444444444</li>
	    <li>55555555555555</li>
	    <li>66666666666666</li>
	    <li>77777777777777</li>
	</ul>
</div>
<script>
$(function(){
	$('.wrapdiv').myscr({
		'width':'200px',//外容器的宽度
		'height':'100px',//外容器的高度
		'innerdiv':'.innerdiv',//滚动的内容块
		'shijian':60//滚动速度,越小越快
		});

	});
</script>
</body>
</html>

提示：您可以先修改部分代码再运行