网页代码，制作控制滚动速度的按钮

发布网友 发布时间：2022-04-19 20:03

我来回答

共1个回答

热心网友 时间：2023-09-08 05:11

这是你说的第二个的代码！
function scrollnews() {
var htext = document.getElementsByTagName("h1");
var text_holder = document.getElementById("newscommend");
var p = ["时尚", "财经", "房产", "汽车", "城市", "科技", "教育", "军事", "公益", "历史", "文化", "读书", "游戏", "体育", "论坛", "娱乐","亲子","健康", "佛教", "商城"];
var purl = ["http://fashion.ifeng.com/", "http://finance.ifeng.com/", "http://house.ifeng.com/", "http://auto.ifeng.com/", "http://city.ifeng.com/", "http://tech.ifeng.com/", "http://e.ifeng.com/", "http://news.ifeng.com/mil/", "http://gongyi.ifeng.com/", "http://news.ifeng.com/history/", "http://book.ifeng.com/culture/", "http://book.ifeng.com/", "http://games.ifeng.com/", "http://news.ifeng.com/sports/", "http://bbs.ifeng.com/", "http://ent.ifeng.com/", "http://baby.ifeng.com/","http://health.ifeng.com/","http://fo.ifeng.com/", "http://vip.itv.ifeng.com/EShop/index.html"];
var oFrag = document.createDocumentFragment();
oFrag.innerHTML = "";
for (var i = 0; i < htext.length; i++) {
oFrag.innerHTML += "<strong>[<a href=" + purl[i] + " target=_blank>" + p[i] + "</a>]</strong> " + htext[i].innerHTML + "  ";
if ((i > 0 && i % 2 == 1) || (i == htext.length - 1 && i % 2 == 0)) {
oFrag.innerHTML += "<br/>";
}
}
text_holder.innerHTML = oFrag.innerHTML;
}

function ScrollText(content, btnPrevious, btnNext, autoStart, timeout, isSmoothScroll) {
this.Speed = 10;
this.Timeout = timeout;
this.stopscroll = false; //是否停止滚动的标志位
this.isSmoothScroll = isSmoothScroll; //是否平滑连续滚动
this.LineHeight = 20; //默认高度。可以在外部根据需要设置
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML; //为了平滑滚动再加一遍

if (this.PreviousButton) {
this.PreviousButton.onclick = this.GetFunction(this, "Previous");
this.PreviousButton.onmouseover = this.GetFunction(this, "MouseOver");
this.PreviousButton.onmouseout = this.GetFunction(this, "MouseOut");
}
if (this.NextButton) {
this.NextButton.onclick = this.GetFunction(this, "Next");
this.NextButton.onmouseover = this.GetFunction(this, "MouseOver");
this.NextButton.onmouseout = this.GetFunction(this, "MouseOut");
}
this.ScrollContent.onmouseover = this.GetFunction(this, "MouseOver");
this.ScrollContent.onmouseout = this.GetFunction(this, "MouseOut");

if (autoStart) {
this.Start();
}
}

ScrollText.prototype = {

$: function(element) {
return document.getElementById(element);
},
Previous: function() {
this.stopscroll = true;
this.Scroll("up");
},
Next: function() {
this.stopscroll = true;
this.Scroll("down");
},
Start: function() {
if (this.isSmoothScroll) {
this.AutoScrollTimer = setInterval(this.GetFunction(this, "SmoothScroll"), this.Timeout);
}
else {
this.AutoScrollTimer = setInterval(this.GetFunction(this, "AutoScroll"), this.Timeout);
}
},
Stop: function() {
clearTimeout(this.AutoScrollTimer);
this.DelayTimerStop = 0;
},
MouseOver: function() {
this.stopscroll = true;
},
MouseOut: function() {
this.stopscroll = false;
},
AutoScroll: function() {
if (this.stopscroll) {
return;
}
this.ScrollContent.scrollTop++;
if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Speed);
}
else {
if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
this.ScrollContent.scrollTop = 0;
}
clearTimeout(this.ScrollTimer);
//this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
},
SmoothScroll: function() {
if (this.stopscroll) {
return;
}
this.ScrollContent.scrollTop++;
if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
this.ScrollContent.scrollTop = 0;
}
},
Scroll: function(direction) {

if (direction == "up") {

this.ScrollContent.scrollTop--;
}
else {
this.ScrollContent.scrollTop++;
}

if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
this.ScrollContent.scrollTop = 0;
}
else if (parseInt(this.ScrollContent.scrollTop) <= 0) {
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}

if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Speed);
}
},
GetFunction: function(variable, method, param) {
return function() {
variable[method](param);
}
}
}

</script>

<script language="javascript" type="text/javascript">
scrollnews();
var scroll1 = new ScrollText("newscommend", "pre", "next", true, 2500, false);

var scroll2 = new ScrollText("breakNewsList", "pre2", "next2", true, 70, true);
scroll2.LineHeight = 24;
</script>
这段代码是把你的两个都解决了的！！
效果是凤凰网http://www.ifeng.com/内容推荐那的！你可以看看！