JavaScriptはニュースの上下スクロールを実現します.

8952 ワード

原理:スクロールバーのスクロールが止まらないことによって実現される効果です.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testtitle>
<script type="text/javascript" src="jquery-1.11.1.min.js">script>

<style type="text/css">
*{
    padding:0;
    margin:0;
    border:none;
}
#news{
    width:300px;
    height:100px;
    margin:20px auto;
    background-color:#CCC;
    border:#039 solid 1px;
    overflow:hidden;/*       ,        ,     scroll,       */
}
#news li{
    line-height:30px;
}
style>
head>
<body>
<div id="news" onmouseover="tz()" onmouseout="ks()">
<ul id="p1">
<li><a href="">1          a>li>
<li><a href="">2          a>li>
<li><a href="">3          a>li>
<li><a href="">4          a>li>
<li><a href="">5          a>li>
<li><a href="">6          a>li>
<li><a href="">7          a>li>
<li><a href="">8          a>li>
ul>
<ul id="p2">
ul>
div>
<script type="text/javascript">
var n=document.getElementById("news");
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p2.innerHTML=p1.innerHTML;
//alert(n.offsetHeight+" 1  "+p1.offsetHeight);
var f=function(){
    n.scrollTop++;
    if(n.scrollTop>=p1.offsetHeight){
        //alert(n.scrollTop+" 1  "+p1.offsetHeight);
        n.scrollTop=0;
    }
}
var i=setInterval(f,20);
var tz=function(){
    clearInterval(i);
}
var ks=function(){
    i=setInterval(f,20);
}
script>
body>
html>