Question

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

    <!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>

Answer 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);

向下滚动选框按钮

1 个答案: