zoukankan      html  css  js  c++  java
  • [html] 图片无缝滚动

    先了解一下对象的几个的属性:

    innerHTML:    设置或获取位于对象起始和结束标签内的 HTML

    scrollHeight: 获取对象的滚动高度。

    scrollLeft:    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    scrollWidth:  获取对象的滚动宽度

    offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

    offsetLeft:    获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    offsetTop:    获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    offsetWidth:  获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

    -----------------------------------------------------------------------

    图片向左无缝滚动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> 图片无缝滚动 </TITLE>
     <style type="text/css">

    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    500px;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }

    </style>
    <script type="text/javascript">
    var speed=10; //数字越大速度越慢
    function Marquee(){
        var tab = document.getElementById("demo");
     var tab1 = document.getElementById("demo1");
     var tab2 = document.getElementById("demo2");
     tab2.innerHTML=tab1.innerHTML;
     if(tab2.offsetWidth-tab.scrollLeft<=0)
     tab.scrollLeft-=tab1.offsetWidth
     else{
     tab.scrollLeft++;
     }
    }
    var MyMar=setInterval(Marquee,speed);
    function clearInterval() {
       clearInterval(MyMar);
    };
    function setInt() {
        MyMar=setInterval(Marquee,speed)
    };

    </script>
     </HEAD>

     <BODY>
      <div id="demo" onmouseover="clearInterval()" onmouseout="setInt()">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    </div>
    <div id="demo2">123</div>
    </div>
    </div>
     </BODY>
    </HTML>

  • 相关阅读:
    oracle 将表名和字段名变为大写
    第三方应用软件提权
    数据库提权
    mybatis spring代理开发
    mybatis整合spring原始dao开发
    mybatis和spring整合的jar包准备
    mybatis整合ehcache(分布式缓存框架)
    mybatis 查询缓存
    mybatis 延迟加载
    mybatis 高级映射
  • 原文地址:https://www.cnblogs.com/kentyouyou/p/2948445.html
Copyright © 2011-2022 走看看