• 上下或左右无缝滚动


    文字或图片实现 向上 无缝滚动
    
    <div id="colee" style="overflow:hidden;height:80px;">
    
        <div id="colee1">
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
               <li><a href="/">文字或图片实现向上无缝滚动</a></li>
    
        </div><div id="colee2"></div>     
    
    </div>
    
    <script>
    
    var speedi=80;
    
    var colee2=document.getElementById("colee2");
    
    var colee1=document.getElementById("colee1");
    
    var colee=document.getElementById("colee");
    
    colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
    
    function Marquee1(){
    
    //当滚动至colee1与colee2交界时
    
    if(colee2.offsetTop-colee.scrollTop<=0){
    
    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
    
    }else{
    
    colee.scrollTop++
    
    }
    
    }
    
    var MyMar1=setInterval(Marquee1,speedi)//设置定时器
    
    //鼠标移上时清除定时器达到滚动停止的目的
    
    colee.onmouseover=function() {clearInterval(MyMar1)}
    
    //鼠标移开时重设定时器
    
    colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speedi)}
    
    </script>
    文字或图片实现 向左 无缝滚动
    
    <!--下面是向左滚动代码-->
    
          <div id="colee_left" style="overflow:hidden;200px;">
    
            <table cellpadding="0" cellspacing="0" border="0">
    
              <tr>
    
                <td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0">
    
                    <tr align="center">
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>
    
                    </tr>
    
                  </table></td>
    
                <td id="colee_left2" valign="top"></td>
    
              </tr>
    
            </table>
    
          </div>
    
          <script>
    
    //使用div时,请保证colee_left2与colee_left1是在同一行上.
    
    var speed=30//速度数值越大速度越慢
    
    var colee_left2=document.getElementById("colee_left2");
    
    var colee_left1=document.getElementById("colee_left1");
    
    var colee_left=document.getElementById("colee_left");
    
    colee_left2.innerHTML=colee_left1.innerHTML
    
    function Marquee3(){
    
    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
    
    colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
    
    else{
    
    colee_left.scrollLeft++
    
    }
    
    }
    
    var MyMar3=setInterval(Marquee3,speed)
    
    colee_left.onmouseover=function() {clearInterval(MyMar3)}
    
    colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
    
    </script> 
    
    <!--向左滚动代码结束-->
  • 相关阅读:
    ElasticSearch基础之批量操作(mget+mbulk)
    ElasticSearch基础+文档CRUD操作
    Flask_restful 插件实战笔记——基本概念与使用
    Django rest framework之序列化小结
    我所理解的Restful API最佳实践
    ElasticSearch入门及核心概念介绍
    生产环境下Flask项目目录构建
    利用linq的Take Skip方法解决 集合拆分的问题
    Oracle trunc() 函数处理数字、日期的整理
    左连接条件与where条件的区别
  • 原文地址:https://www.cnblogs.com/qigege/p/5363710.html
Copyright © 2020-2023  润新知