zoukankan      html  css  js  c++  java
  • javascript 滚动+停留 代码

    HTML部分

    <style type="text/css">
    <!--
    ul
    {height:230px;overflow:hidden}
    -->
    </style>

    <ul id="rolltxt">
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称1</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称2</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称3</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称4</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称5</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称6</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称7</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称8</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称9</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称10</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称11</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称12</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称13</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称14</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称15</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称16</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称17</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称18</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称19</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称20</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称21</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称22</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称23</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称24</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称25</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称26</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称27</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称28</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称29</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称30</p></li>
    <li><href="#"><img src="images/pro.gif" /></a><p>产品名称31</p></li>
    </ul>

    Javascript代码部份
    <script language="javascript">
    // JavaScript Document

    function extractNodes(pNode){
        
    if(pNode.nodeType == 3)return null;
        
    var node,nodes = new Array();
        
    for(var i=0;node= pNode.childNodes[i];i++){
            
    if(node.nodeType == 1)nodes.push(node);
        }

        
    return nodes;
    }

    var objj=document.getElementById("rolltxt");
    for(i=0;i<4;i++){
        objj.appendChild(extractNodes(objj)[i].cloneNode(
    true));
    }

    settime
    =0;
    var t=setInterval(rolltxt,10);  //行动时间
    function rolltxt(){
        
    if(objj.scrollTop % (objj.clientHeight+0==0){  // -0 高度
            settime+=1;
            
    if(settime==300){  //停留时间
                objj.scrollTop+=1;
                settime
    =0;
            }

        }
    else{
            objj.scrollTop
    +=1;
            
    if(objj.scrollTop==(objj.scrollHeight-objj.clientHeight))
                objj.scrollTop
    =0;
            }

        }

    }

    objj.onmouseover
    =function(){clearInterval(t)}
    objj.onmouseout
    =function(){t=setInterval(rolltxt,10)}        //  鼠标移动后行动时间
    </script>
  • 相关阅读:
    从前端回到了我的本专业网络
    相对定位与绝对定位的理解
    table( 表格)以及列表的使用
    使用editplus编写HTML页面为什么设置了UTF-8仍然中文乱码
    复习--3--对于第三堂课的总结--将两个页面相互用超链接链接到一起
    前端学习笔录--2--HTML篇--有点麻烦的加载图片
    前端学习笔录--1--HTML篇
    sublime text 有毒--无法使用快捷键利用浏览器打开HTML文件
    sublime text 插件
    sublime写网页代码,里面的中文字符会出现乱码
  • 原文地址:https://www.cnblogs.com/0754ydj/p/1241318.html
Copyright © 2011-2022 走看看