工作的时候总是用到这个效果,就记录下来方便下次使用
例:
css:
*{ margin:0 ; padding:0;}
body{ font-size:12px;}
ul,li{ list-style:none;}
.box{ width:200px; height:300px; position:relative; line-height:25px; overflow:hidden; margin:20px auto; border:1px solid #F60;}
.box ul{ padding:0 10px; position:relative;}
html:
<div id="demo" class="box">
<div id="demo1" class="boxIn">
<ul>
<li>1神马都是浮云神马都是浮云</li>
<li>2神马都是浮云神马都是浮云</li>
<li>3神马都是浮云神马都是浮云</li>
<li>4神马都是浮云神马都是浮云</li>
<li>5神马都是浮云神马都是浮云</li>
<li>6神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
<li>神马都是浮云神马都是浮云</li>
</ul>
</div>
<div id="demo2"></div>
</div>
js:
<script type="text/javascript">
<!--
(function($){
$.fn.scrollFont = function(o){
var d = {
scrollWap:'#demo',
scrollWapIn:'#demo1',
cloneCon:'#demo2', //
speed:60 //滚动的间隔
};
var o = $.extend(d,o);
var demo = $(d.scrollWap).scrollTop();
var ul = $(d.scrollWapIn).height(); //获得滚动区框的高度
var one = $(d.scrollWapIn).html(); //获得滚动区中的内容
var demo2 = $(d.cloneCon).append(one);//克隆并添加到demo2
var inter = setInterval(fn,d.speed);
function fn(){
if(demo >= 0){
$(d.scrollWap).scrollTop(demo++)
}
if(demo == ul){
demo = 0;
}
}
$(d.scrollWap).mouseover(function(){
clearInterval(inter);
});
$(d.scrollWap).mouseout(function(){
inter = setInterval(fn,d.speed);
});
}
})(jQuery);
$(function(){
$.fn.scrollFont()
});
//-->
</script>