js jq文字向上无缝滚动、缓冲滚动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/80356441

<!DOCTYPE html>
<html>
<head>
 <title>文字向上无缝滚动</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <style type="text/css">
 *{
 padding: 0;
 margin:0;
 }
 ul,li{
 list-style: none
 }
 .scroll {
 height:90px;
 width:100%;
 max-width:640px;
 background-color:#000;
 overflow:hidden;
 color: #fff;
 }
 .scroll ul {
 width:100%;
 position:absolute;
 left:0;
 top:0;
 }
 .scroll span {
 font-size:20px;
 height:30px;
 /*color:#D83E21;*/
 }
 .scroll li {
 height:30px;
 line-height:30px;
 }
 </style>
</head>
<body>
 <div id="scroll" class="scroll clearfix">
  <ul>
	  <li>444444444444444444444444</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>33333333333333333333333333</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>11111111111111111111111111</li>
	  <li>2222222222222</li>
  </ul>
 </div>
 <script type="text/javascript"> 
 //滚动
 var scrollIndex=0;
 var Timer=null;
 function scroll_f(){
  clearInterval(Timer);
  var ul=$("#scroll ul");
  var li=ul.children("li");
  var h=li.height();
  var index=0;
  ul.css("height",h*li.length*2);
  ul.html(ul.html()+ul.html());    
     function run()
         {
         if(scrollIndex>=li.length){
          ul.css({top:0});
          scrollIndex=1;
          ul.animate({top:-scrollIndex*h},200);
         } 
         else{
          scrollIndex++; 
          ul.animate({top:-scrollIndex*h},200);
         }
         }
     Timer=setInterval(run,1500); 
 }
 $(function(){
  scroll_f();
 })
</script>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上下左右不间断无缝滚动效果(兼容火狐和IE)</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
<p>此处放文字。。。。。。。。。</p>
</div>
<div id="colee2"></div>
</div>
<script type="text/javascript">
    var speed=30;
    var move=document.getElementById("colee");
    var move_1=document.getElementById("colee1");
    var move_2=document.getElementById("colee2");
    move_2.innerHTML=move_1.innerHTML; //克隆
    function Marquee1(){
    //当滚动至colee1与colee2交界时
    if(move_2.offsetTop<=move.scrollTop){//小于向上  colee_left2.offsetLeft<=colee_left.scrollLeft
        move.scrollTop-=move_1.offsetHeight; //小于减 大于加
         }else{
            move.scrollTop++;//++ 向上 -- 向下
        }
    }
    var MyMar1=setInterval(Marquee1,speed)
    //鼠标移上时清除定时器达到滚动停止的目的
    move.onmouseover=function(){
        clearInterval(MyMar1)
    }
    //鼠标移开时重设定时器
    move.onmouseout=function(){
        MyMar1=setInterval(Marquee1,speed)
    }
</script>
<!--向上滚动代码结束-->
</body>
</html>

js 新闻展示缓冲滚动 2s一次

<style>
.shell{
border:1px solid #aaa; 
width:386px;
padding:5px; 
}
.core{
height:36px;
overflow:hidden;
}
.core a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333}
</style>
</head>
<body>
<div class="shell">
    <div id="div1" class="core">
      <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" >
            超级漂亮的几款清新、常用的网页CSS布局配色实例</a>
      <a title="CSS制作斜角上有背景图片的Div层">
            CSS制作斜角上有背景图片的Div层</a>
      <a title="Js实现的层展开、层折叠效果,默认时候层是折叠的">
            Js实现的层展开、层折叠效果,默认时候层是折叠的</a>
      <a title="DIV始终固定在网页右下角位置的CSS实现方法">
            DIV始终固定在网页右下角位置的CSS实现方法</a>
    </div> 
</div>
</body>
<script>
function myGod(id,w,n){
  var box=document.getElementById(id),can=true,w=w||1500,fq=fq||10,n=n==-1?-1:1;
  box.innerHTML+=box.innerHTML;
  box.onmouseover=function(){
    can = false
  };
  box.onmouseout=function(){
    can = true
  };
  var max=parseInt(box.scrollHeight/2);
  new function (){
     var stop = box.scrollTop % 18 == 0 &&! can;
     if(!stop){
      var set = n > 0 ? [max,0]:[0,max];
      box.scrollTop == set[0] ? box.scrollTop = set[1]:box.scrollTop+=n;
     };
     setTimeout(arguments.callee,box.scrollTop % 36 ? fq:w);//控制上滚多少为div1的高度,这里显示两个新闻 一个a高度为18*2 = 36
  };
};
myGod('div1',2000,1);//id 时间 正上负下
</script>

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页