demo.css
.box{ width:400px; 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-size:14px; line-height: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;}
scroll.js
(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);
demo.html
<!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" /> <title>jQuery文字无缝滚动效果代码</title> <link type="text/css" href="css/base.css" rel="stylesheet" /> <link type="text/css" href="css/demo.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <script type="text/javascript"> $(function(){ $('.list_lh li:even').addClass('lieven'); $("div.list_lh").myScroll({ speed:40, //数值越大,速度越慢 rowHeight:68 //li的高度 }); }); </script> </head> <body> <div class="box"> <div class="bcon"> <h1><b>文字无缝上下滚动</b></h1> <!-- begin --> <div class="list_lh"> <ul> <li> <p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">2000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">3000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">4000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">5000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">6000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">7000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">8000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">9000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">1100000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> <li> <p><a href="###" target="_blank">1200000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p> <p><a href="###" target="_blank" class="a_blue">阅谁问君诵,水落清香浮</a><span>17:28:05</span></p> </li> </ul> </div> <!-- end --> </div> </div> </body> </html>
效果图:
相关推荐
文字无缝滚动效果代码(jQuery),鼠标经过停下,鼠标移走继续滚动。兼容ie6及主流浏览器
jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果
jQuery排名文字无缝循环向上滚动代码,鼠标悬停时会暂停滚动,适用于抽奖显示中奖人信息、排行信息列表文字上下滚动轮播展示效果。
本篇文章分享了如何实现文字无缝向上翻动效果的示例代码。代码清晰明了,可直接下载使用。有兴趣的朋友可以看下
css 代码如下: <style> .xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;} .xMarquee ol{list-style-type:none; margin:0px;...
这是一款仿新浪微博首页的jQuery文字滚动留言板插件。这款留言板插件使用户发布的信息不断的滚动显示,并且无缝衔接,效果非常不错。
原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果。然后通过整个大容器滚动条的左右或者上下的移动来实现滚动。下面附上一张手绘的图,来简要阐述下原理。首先,我们的目的是实现框1中...
这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动...
63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...
这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效。一边飞出一边变淡的效果非常漂亮,带小按钮。 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...