今天我们将学习如何使用jquery实现文字无缝衔接效果，废话不多说，开始上代码。
<html> <head> <meta charset="utf-8" /> <title>title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script> <link type="text/css" href="css/css.css" rel="stylesheet"> <script type="text/javascript" src="js/scroll.js">script> <script type="text/javascript" src="js/jquery.js">script> <script type="text/javascript"> $(document).ready(function(){ $('.list_lh li:even').addClass('lieven');// 向被选元素添加一个或多个类// :even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。//index 值从 0 开始，所有第一个元素是偶数 (0)。//最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素。})$(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="#" target="_blank">1000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank"class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">2000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">3000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">4000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">5000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">6000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">7000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">8000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">9000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">10000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">11000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> <li> <p><a href="#" target="_blank">12000000a><a href="#" target="_blank" class="btn_lh">领号a><em>获得em>p> <p><a href="#" target="_blank" class="a_blue">网游战江湖公测豪华礼包a><span>17:28:05span>p> li> ul> div> div> <div class="btm"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持及以下浏览器。p> div> div> body>html>这是我们的HTML部分的代码。
*{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;}这个呢我们CSS部分的代码，虽然不是很多，但是也很重要哦！
(function($){ $.fn.myScroll=function(options){// $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。//如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. //那么你可以这样子：$("#div").abc(); var defaults={ speed:40, rowHeight:24 }; var opts=$.extend({},defaults,options),intId=[];// jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。defaults,options合并到extend function marquee(obj,step){// 无缝滚动插件 obj.find("ul").animate({// find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。//animate() 方法执行 CSS 属性集的自定义动画。//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。//只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。//必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。使用 "+=" 或 "-=" 来创建相对动画 marginTop:'-=1' //距离顶端的距离减1 },0,function(){ var s=Math.abs(parseInt($(this).css("margin-top")));// abs() 方法可返回一个数的绝对值。 if(s>=step){ $(this).find("li").slice(0,1).appendTo($(this));// 选中所有段落，然后将所选内容缩减为只包含第一和第二个段落// slice() 把匹配元素集合缩减为指定的指数范围的子集。如上的从第0行开始，缩减一个。// appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。 $(this).css("margin-top", 0); } }); } this.each(function(i){// each() 方法规定为每个匹配元素规定运行的函数。 var sh=opts["rowHeight"],speed=opts["speed"],_this=$(this);// $.speed() 函数创建一个包含一组属性的对象用来定义自定义动画。 intId[i]=setInterval(function(){// setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this,sh); } },speed); _this.hover(function(){ clearInterval(intId[i]);// 可取消由setInterval()设置的timeout,参数必须是由setInterval()返回的ID值 },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); });} })(jQuery);这个是我们JS部分的代码。
其中，我也写了很多的注释来帮助大家理解，希望大家喜欢。
这个是我们的一个效果图，当然，中间的文字部分是会不停的滚动的，是一个动态的。
这就是我们今天的全部内容了，如果喜欢，记得关注呦！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
