zoukankan      html  css  js  c++  java
  • js控制div自动上下翻滚

     1  <style>
     2     #test{
     3 
     4         785px;
     5         height:175px;
     6         overflow:hidden;
     7     }
     8     #data{
     9         785px;
    10         height:175px;
    11     }
    12   </style>

      注意:1.最大的div,id为test,overflow:hidden; 这个多余的必须是隐藏

         2.注意最大的div和它的仔的width和height,否则效果很难出现

     1 <script>
     2      function ting(){
     3         clearInterval(myTimer);
     4         clearInterval(myTimerStop);
     5     }
     6     function start(){
     7         myTimer = setInterval(init,speed);
     8     }
     9     var speed = 10;
    10     function init(){
    11         var data = document.getElementById("test");
    12         if(data.scrollTop>=175*8){
    13             data.scrollTop=0;
    14         }else{
    15             if(data.scrollTop==0){
    16                 ting();
    17                 myTimerStop = setInterval(stopTime,1000);
    18             }
    19             data.scrollTop=data.scrollTop+1;
    20             if(data.scrollTop%175==0){
    21                 ting();
    22                 myTimerStop = setInterval(stopTime,1000);
    23             }
    24         }
    25     }
    26     var y = 1;
    27     function stopTime(){
    28         y++;
    29         if(y==5){
    30             clearInterval(myTimerStop);
    31             myTimer = setInterval(init,speed);
    32             y=1;
    33         }
    34     }
    35     var myTimer = setInterval(init,speed);
    36     var myTimerStop = null ;
    37   </script>
    <div id="test" onmouseover="ting();" onmouseout="start();">
            <div id="data" >1</div>
            <div id="data" >2</div>
            <div id="data" >3</div>
            <div id="data" >4</div>
            <div id="data" >5</div>
            <div id="data" >6</div>
            <div id="data" >7</div>
            <div id="data" >8</div>
            <div id="data" >9</div>
        </div>

      

        

    如果有使用请标明来源:http://www.cnblogs.com/duwenlei/
  • 相关阅读:
    s:set标签
    Oracle创建表语句(Create table)语法详解及示例
    jsp:useBean
    四则运算练习
    Navicat Premium无法连上ORACLE数据库的几种问题解决方法
    Ubuntu开机等待5分钟的取消方法
    Ubuntu内网、外网网络IP地址配置
    eclipse中常用的快捷键汇总
    oracle死锁进程及杀死死锁进程
    oracle导入导出表数据
  • 原文地址:https://www.cnblogs.com/duwenlei/p/3552836.html
Copyright © 2011-2022 走看看