平滑滚动,该如何处理
日期：2014-05-18 浏览次数：20397 次
平滑滚动
？？？
------解决方案--------------------
<html>
<head>
<style> img{width:270px} </style>
</head>
<body>
开始： <a id=sha href= "javascript:up() "> 向上 </a> <a id=xia href= "javascript:down() "> 向下 </a>
<div id=demo style=overflow:hidden;height:200;width:260;background:#214984;color:#ffffff>
<div id=demo1>
<img src= "1.jpg "> <br> <img src= "2.jpg "> <br> <img src= "3.jpg "> <br> <img src= "4.jpg ">
</div> <div id=demo2> </div>
</div>
<script>
function up(b)
{
var speed=5
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop <=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=xia.onmousedown=function() {clearInterval(MyMar)}//鼠标移上时清除定时器滚动停止
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
}
function down()
{
var speed=5
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee()
{
if(demo1.offsetTop-demo.scrollTop> =0)
demo.scrollTop+=demo2.offsetHeight
else
demo.scrollTop--
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=sha.onmousedown=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
开始： <a id=zuo href= "javascript:left() "> 向左 </a> <a id=you href= "javascript:right() "> 向右 </a>
<div id=demor style=overflow:hidden;height:200;width:800;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr> <td id=demor1 valign=top>
<img src= "1.jpg "> <img src= "2.jpg "> <img src= "3.jpg "> <img src= "4.jpg ">
</td>
<td id=demor2 valign=top> </td>
</tr> </table>
</div>
<script>
function left()
{
var speed=5
demor2.innerHTML=demor1.innerHTML
function Marquee(){
if(demor2.offsetWidth-demo.scrollLeft <=0)
demor.scrollLeft-=demor1.offsetWidth
else{
demor.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demor.onmouseover=you.onmousedown=function() {clearInterval(MyMar)}
demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
function right()
{
var speed=5
demor2.innerHTML=demor1.innerHTML
demor.scrollLeft=demor.scrollWidth
function Marquee(){
if(demor.scrollLeft <=0)
demor.scrollLeft+=demor2.offsetWidth
else{
demor.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demor.onmouseover=zuo.onmousedown=function() {clearInterval(MyMar)}
demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
</body>
</html>
？？？
------解决方案--------------------
<html>
<head>
<style> img{width:270px} </style>
</head>
<body>
开始： <a id=sha href= "javascript:up() "> 向上 </a> <a id=xia href= "javascript:down() "> 向下 </a>
<div id=demo style=overflow:hidden;height:200;width:260;background:#214984;color:#ffffff>
<div id=demo1>
<img src= "1.jpg "> <br> <img src= "2.jpg "> <br> <img src= "3.jpg "> <br> <img src= "4.jpg ">
</div> <div id=demo2> </div>
</div>
<script>
function up(b)
{
var speed=5
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop <=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=xia.onmousedown=function() {clearInterval(MyMar)}//鼠标移上时清除定时器滚动停止
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
}
function down()
{
var speed=5
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee()
{
if(demo1.offsetTop-demo.scrollTop> =0)
demo.scrollTop+=demo2.offsetHeight
else
demo.scrollTop--
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=sha.onmousedown=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
开始： <a id=zuo href= "javascript:left() "> 向左 </a> <a id=you href= "javascript:right() "> 向右 </a>
<div id=demor style=overflow:hidden;height:200;width:800;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr> <td id=demor1 valign=top>
<img src= "1.jpg "> <img src= "2.jpg "> <img src= "3.jpg "> <img src= "4.jpg ">
</td>
<td id=demor2 valign=top> </td>
</tr> </table>
</div>
<script>
function left()
{
var speed=5
demor2.innerHTML=demor1.innerHTML
function Marquee(){
if(demor2.offsetWidth-demo.scrollLeft <=0)
demor.scrollLeft-=demor1.offsetWidth
else{
demor.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demor.onmouseover=you.onmousedown=function() {clearInterval(MyMar)}
demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
function right()
{
var speed=5
demor2.innerHTML=demor1.innerHTML
demor.scrollLeft=demor.scrollWidth
function Marquee(){
if(demor.scrollLeft <=0)
demor.scrollLeft+=demor2.offsetWidth
else{
demor.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demor.onmouseover=zuo.onmousedown=function() {clearInterval(MyMar)}
demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
