javascript 向上滚动

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Language" content="zh-CN">

<meta name="Keywords" content=",,">

<meta name="Description" content=" /">

<title>SuperSlide - 文字无缝滚动特效-上</title>

<!-- <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> -->



</head>



<body>









<style type="text/css">



    /* css 重置 */

    *{margin:0; padding:0; list-style:none; }

    body{ background:#fff; font:normal 12px/22px 宋体;  }

    img{ border:0;  }

    a{ text-decoration:none; color:#333;  }

    a:hover{ color:#1974A1;  }





    /* 本例子css */

    .txtMarquee-top{ overflow:hidden; position:relative;  border:1px solid #ccc;   }

    .txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }

    .txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;

         cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}

    .txtMarquee-top .hd .next{ background-position:0 -140px;  }

    .txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }

    .txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }

    .txtMarquee-top .bd{ padding:15px;  }

    .txtMarquee-top .infoList li{ height:24px; line-height:24px;   }

    .txtMarquee-top .infoList li .date{ float:right; color:#999;  }



</style>





        <div class="txtMarquee-top">

            <div class="bd">

                <div class="tempWrap" id="tempWrap" style="overflow:hidden; position:relative; height:120px" >

                    <ul class="infoList" id="infoList" style="position: relative; padding: 0px; margin: 0px; top: 0px;" >

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">口语:会说中文就能说英语!</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">数理化老师竟也看学习资料?</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">学外语,上北外!</a></li>

                        <li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">口语:会说中文就能说英语!</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">数理化老师竟也看学习资料?</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>

                    </ul>

                </div>

            </div>

        </div>



        <script type="text/javascript">

            

            window.onload=function(){

                

                var InfoList = document.getElementById('infoList');

                var li = document.getElementsByTagName('li');

                var TempWrap = document.getElementById('tempWrap');

                var HTempWrap = TempWrap.offsetHeight;

                var HInfoList = InfoList.offsetHeight;

                var index = 0; 

                var Hli = li[0].offsetHeight;            

                var Lli = li.length;

                InfoList.style.height = Hli*Lli;

                var info = (HInfoList-HTempWrap)*-1;





                Timeint = setInterval(setTime,500)



                TempWrap.onmouseover = function(){

                    clearInterval(Timeint);

                };

                TempWrap.onmouseout = function(){

                    Timeint = setInterval(setTime,500);

                }

                function setTime(){



                    index --;

                    if(index <= info){

                        index = -1;

                        return false;

                    }else{

                        index = index+-3;

                        InfoList.style.top = index+'px';

                    }

                }



            }

         

         

         

        </script>



        

</body>

</html>

效果图:

 javascript 向上滚动

 

你可能感兴趣的:(JavaScript)