http://www.dowebok.com/demo/188/index3.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery文字无缝滚动效果代码</title> <style type="text/css"> /* CSS Document */ *{margin:0;padding:0;font-size:12px;} body{ background:none;} input,button,select,textarea{outline:none;} ul,li,dl,ol{list-style:none;} a{color:#666; text-decoration:none;} .box{ width:980px; margin:0 auto;} .bcon{ width:270px; border:1px solid #eee; margin:30px auto;} .bcon h1{ border-bottom:1px solid #eee; padding:0 10px;} .bcon h1 b{ font:bold 14px/40px '瀹嬩綋'; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;} .list_lh{ height:400px; overflow:hidden;} .list_lh li{ padding:10px;} .list_lh li.lieven{ background:#F0F2F3;} .list_lh li p{ height:24px; line-height:24px;} .list_lh li p a{ float:left;} .list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;} .list_lh li p span{ color:#999; float:right;} .list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;} .btn_lh:hover{ color:#fff; text-decoration:none;} .btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;} </style> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // JavaScript Document (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: '-=1' },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery); </script> <script type="text/javascript"> $(document).ready(function(){ $('.list_lh li:even').addClass('lieven'); }) $(function(){ $("div.list_lh").myScroll({ speed:40, //数值越大，速度越慢 rowHeight:68 //li的高度 }); }); </script> </head> <body> <div class="box"> <div class="bcon"> <h1><b>领号实时播报</b></h1> <!-- 代码开始 --> <div class="list_lh"> <ul> <li> <p><a href="#">1000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">2000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">3000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">4000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">5000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">6000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">7000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">8000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">9000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1100000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1200000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> </ul> </div> <!-- 代码结束 --> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 <!doctype html> <html> <head> <title>新闻无缝滚动 左右</title> <meta charset="utf-8"> <style type="text/css"> * {padding:0px; margin:0px;} .box{width:300px;height:30px;line-height30px;position:relative;overflow:hidden;} .roll {width:1200px;position:absolute;left:0;top:0; } .roll li{color:#fff;width:200px;line-height30px;height:30px;float:left; text-align:center;} </style> <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> </head> <body> <div class="box"> <ul class="roll"> <li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li> <li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li> </ul> </div> <script type="text/javascript"> $(function(){ var num = 0; function goLeft(){ if (num == -600){ num =0; } num -= 1; $(".roll").css({left:num}) } var timer = setInterval(goLeft,20); $(".box").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(goLeft,20); }); }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>多行滚动jQuery循环新闻列表代码</title> <style type="text/css"> ul,li{margin:0;padding:0} img{border:0px;} a{text-decoration:none;border:0px;} /* 横向滚动 */ #scrollDiv2{border:#ccc 1px solid;} #scrollDiv3{border:#ccc 1px solid;} </style> <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <script type="text/javascript"> /** * 多行文字滚动，可以实现向左和向上两种滚动 * **/ $.extend({ wordScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", width:300, // 每行的宽度 height:100, // div的高度 liHeight:25, // 每行高度 line:2, // 每次滚动的行数 speed:1000, // 动作时间 interval:2000, // 滚动间隔 picTimer:0, // 间隔句柄，不需要设置，只是作为标识使用 isHorizontal:false // 是否横向滚动 } //参数初始化 var opts = $.extend(this.defaults,opt); // 纵向横向通用 $("#"+opts.objId).css({ width:opts.width, height:opts.height, "min-height":opts.liHeight, "line-height":opts.liHeight+"px", overflow:"hidden" }); $("#"+opts.objId+" li").css({ height:opts.liHeight }); if(opts.line==0) opts.line=1; // 横向滚动 if(opts.isHorizontal){ // 横向使用，不够一屏则不滚动 if($("#"+opts.objId).find("li").size()<=opts.line) return; var scrollWidth = 0 - opts.line*opts.width; $("#"+opts.objId).css({ width:opts.width*opts.line + "px", }); $("#"+opts.objId+" li").css({ "display":"block", "float":"left", "width":opts.width + "px" }); $("#"+opts.objId+" ul").css({ width:$("#"+opts.objId).find("li").size()*opts.width + "px" }); }else{ //如果不够一屏内容 则不滚动 if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10)) return; var upHeight=0-opts.line*opts.liHeight; } // 横向滚动 function scrollLeft(){ $("#"+opts.objId).find("ul:first").animate({ marginLeft:scrollWidth },opts.speed,function(){ for(i=1;i<=opts.line;i++){ $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").css({marginLeft:0}); }); }; // 纵向滚动 function scrollUp(){ $("#"+opts.objId).find("ul:first").animate({ marginTop:upHeight },opts.speed,function(){ for(i=1;i<=opts.line;i++){ $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").css({marginTop:0}); }); }; //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 $("#"+opts.objId).hover(function() { clearInterval(opts.picTimer); },function() { opts.picTimer = setInterval(function() { // 判断执行横向或纵向滚动 if(opts.isHorizontal) scrollLeft(); else scrollUp(); },opts.interval); // 自动播放的间隔，单位：毫秒 }).trigger("mouseleave"); } }); </script> <script type="text/javascript"> $(document).ready(function(){ $.wordScroll({ objId:"scrollDiv2" }); $.wordScroll({ objId:"scrollDiv3", isHorizontal:true }); }); </script> </head> <body> <div id="scrollDiv2"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> <li>这是公告标题的第九行</li> </ul> </div> <div id="scrollDiv3"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> <li>这是公告标题的第九行</li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动测试</title> <style> li{ list-style: none; } #g1{ width: 450px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; } #g1 ul,#g2 ul{ display: block; margin: 0; width: 430px; padding-left: 10px; } #g1 li,#g2 li{ height: 40px; border-bottom: 1px dotted #ccc; line-height: 35px; } #g1 span,#g2 span{ color: #ff5203; margin-left: 50px; } #g2{ width: 450px; height: 82px; overflow: hidden; border: 1px solid #CCCCCC; } </style> </head> <body> <h1>文字无缝滚动</h1> <div id="g1"> <ul id="con1"> <li>1、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>2、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>3、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>4、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>5、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>6、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> </ul> <ul id="con2"></ul> </div> <script> var con=document.getElementById('g1'); var con1=document.getElementById('con1'); var con2= document.getElementById('con2'); con2.innerHTML = con1.innerHTML; function scrollUp(){ if(con.scrollTop >= con1.offsetHeight){ con.scrollTop = 0; }else{ con.scrollTop++; } } var time=50; myScroll=setInterval('scrollUp()',time); con.onmouseover = function(){ clearInterval(myScroll); } con.onmouseout = function(){ myScroll = setInterval("scrollUp()",time); } </script> <h1>文字间歇性滚动</h1> <div id="g2"> <ul > <li>1、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>2、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>3、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>4、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>5、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> <li>6、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li> </ul> <script> var are=document.getElementById('g2'); var iLiHeight=41; are.innerHTML+=are.innerHTML; are.scrollTop=0; var speed=50; var delay=2000; var time; function starMove(){ time = setInterval('scrollUp2()',speed); are.scrollTop++; } function scrollUp2(){ if(are.scrollTop % iLiHeight == 0 ){ clearInterval(time); setTimeout(starMove,delay); }else{ are.scrollTop++; if(are.scrollTop>= are.scrollHeight/2){ are.scrollTop=0; } } } setTimeout(starMove,delay); </script> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jq新闻滚动 喜欢 (0)or分享 (0)
