• javascript实现文字图片滚动示例


    除了html<marquee>标签实现网页上面的滚动效果外,我们还可以自己量身定制一个滚动效果,其实很简单,用定时器(setInterval)即可简单实现。

    实现思路是:1.触发实现 2.实现定时 3.判断条件并执行

    滚动文字示例代码:

     1 <html>
     2  <head>
     3  <title>滚动文字</title>
     4   <style type="text/css">
     5             .divOuter
     6             {
     7                 position:relative;
     8                 width:600px;
     9                 height:250px;
    10                 margin-left:340px;
    11                 margin-top:200px;
    12                 font-size:20px;
    13                 border:2px solid #FF9933;
    14             }
    15             .divInner
    16             {
    17                 position:relative;
    18                 width:80px;
    19                 height:42px;
    20                 margin-top:100px;
    21             }
    22         </style>
    23         <script type="text/javascript">
    24             
    25             function moveWords()
    26             {
    27             
    28                 setInterval(changeLocation,10);
    29             }
    30     
    31             function changeLocation()
    32             {
    33             
    34                 var outerDiv = document.getElementById("outerId");
    35         
    36                 var innerDiv = document.getElementById("innerId");
    37         
    38                 var outerWidth = outerDiv.clientWidth - innerDiv.clientWidth + "px";
    39         
    40                 if(innerDiv.style.left == outerWidth)
    41                 {
    42                 
    43                     innerDiv.style.left = 0 + "px";
    44                 }
    45                 else
    46                 {
    47                 
    48                     innerDiv.style.left = innerDiv.offsetLeft + 1 + "px";
    49                 }
    50             }
    51         </script>
    52  </head>
    53   <body onload="moveWords()">
    54         <div id="outerId" name="frameDiv" class="divOuter">
    55             <div id="innerId" class="divInner">
    56                 滚动文字
    57                 <br />
    58                 滚动文字
    59             </div>
    60         </div>
    61     </body>
    62 </html>

    当然本处只是以文字为例,<div id="innerId" class="divInner"> 中还可以替换为别的元素,但效果是不变的。

  • 相关阅读:
    移动端判断键盘弹出和收起
    【JS】空格分隔手机号
    【vue】中 provide 和 inject 的使用方法
    【vue】中 $parent 和 $children 的使用方法
    第一个COCOS2d项目
    C语言性能优化与基础知识
    OC中的protocol
    OC中的block数据类型
    OC的ARC机制
    OC内存管理
  • 原文地址:https://www.cnblogs.com/tzhz/p/3046344.html
Copyright © 2020-2023  润新知