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>