向下滚动选取框按钮答案

【问题标题】：Scrolling down marquee buttons向下滚动选取框按钮
【发布时间】：2013-07-10 12:42:24
【问题描述】：

您好，我试图制作一个向下滚动的文本（如选框，但消息之间没有空格）问题是我想要 2 个按钮来更改滚动，例如，如果我单击带有箭头指向的按钮up 文本将向上移动。提前感谢您的任何答案！这是我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
<style type="text/css">

#marqueecontainer{
position: relative;
width: 260px; /*marquee width */
height: 360px; /*marquee height */
overflow: hidden;
background-color: white;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">



var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.bottom)>(actualheight*(-1)+8))
cross_marquee.style.bottom=parseInt(cross_marquee.style.bottom)-copyspeed+"px"
else
cross_marquee.style.bottom="0px"
}

function initializemarquee(){
 cross_marquee=document.getElementById("vmarquee")
 cross_marquee.style.bottom=0

 marqueeheight=document.getElementById("marqueecontainer").offsetHeight
 actualheight=cross_marquee.offsetHeight;
 var div=cross_marquee.cloneNode(true);
 div.style.left='0px';
 div.style.bottom=actualheight+'px';
 cross_marquee.appendChild(div);
 if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
  cross_marquee.style.height=marqueeheight+"px"
  cross_marquee.style.overflow="scroll"
  return
 }
 setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script></head>

<body>
<div id="marqueecontainer" onMouseover="copyspeed=marqueespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">


<p>Message 1 </p>

</div>
</div>
<input style="position: absolute; left: 902px; top: 153px;"   type="image" width="35" height="35" src="../images/arrow-button-up.png" onmouseover="changeMarquee('up')" onmouseout="changeMarquee('speedup')" id="upBtn" value="Marquee up" /> 
  <input style="position: absolute; left: 902px; top: 518px;"   type="image" width="35" height="35" src="../images/arrow-button-down.png" onmouseover="changeMarquee('down')"   onmouseout="changeMarquee('speeddown')" onfocus="" onclick="" id="downBbtn" value="Marquee down" />
</body>

</html>

【问题讨论】：

您应该向我们展示选框中内容的格式。如果您对每一行内容使用 DIV，则滚动可能不是最理想的（对于用户而言），只需删除最后一段内容并将其添加到开头可能会更好。

标签： marquee

【解决方案1】：

这里有一个 JavaScript 可以帮助你。 http://jsfiddle.net/HZSVE/3/

它不是逐像素滚动，而是采用选取框的内部元素，并将第一个元素附加到底部以向下滚动或将最后一个元素插入到开头以向上滚动。

var vmElm = document.getElementById("vmarquee");
var vmBtnDown = document.getElementById("vmdown");
var vmBtnUp = document.getElementById("vmup");

var startTime = 2000;
var scrollTime = 500;
var scrollDown = true;
var paused = false;

vmElm.onmousemove = function() {
    paused=true; 
};
vmElm.onmouseout = function() {
    paused=false; 
};
vmBtnDown.onclick = function() {
    scrollDown = true;
};
vmBtnUp.onclick = function() {
    scrollDown = false;
};
function vmScroll() {
    if(!paused) {
        var par = vmElm;
        var elms = par.getElementsByTagName("div");
        var elm;
        if(scrollDown) {
            elm = elms[0];
            par.removeChild(elm);
            par.appendChild(elm);
        } else {
            elm = elms[elms.length - 1];
            par.removeChild(elm);
            par.insertBefore(elm, elms[0]);
        }
    }
    setTimeout(vmScroll, scrollTime);
}

setTimeout(vmScroll, startTime);

【讨论】：

我怎样才能让它顺利移动？？
我怎样才能让它平滑移动？我想在鼠标悬停按钮时改变速度，但我找不到改变按钮图标的方法。我遇到的另一个问题是，当我将鼠标悬停在按钮上时，它就像品牌向下移动一样。对不起，我对这一切都很陌生。
@Ant Mar - 用这种方法很难模拟平滑度。您可以使用 scrollTime 变量更改速度。您可以根据需要制作任何按钮，IMG、A、input type=image，只要它们具有 vmBtnUp 和 vmBtnDown 的唯一 ID（在我的脚本中）。
ok thx 在这里检查一下 plz 我发现了这段代码，而且它更简单，但是遇到了一些问题，谢谢！ stackoverflow.com/questions/17592073/…
@Ant Mar - 它可以在每个计时器滴答声中移动 div 的“隐藏”滚动条。它不会循环，这就是它更简单的原因。