写好了,不见效果,也不向上滚动。不知道是什么原因。一时看不出什么问题的,也没有什么报错问题的。请高手帮帮忙看下,把你改的代码也贴上来参考下,再此谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单向上滚动</title>
<style type="text/css">.menu_title{
background-color:#C34B09;
color:#FFFFFF;
font-size:16px;
height:20px;
line-height:20px;
font-weight:bold;
}
.menu{
width:300px;
margin:0 auto;
border:1px solid #ECE9D8;
}
ul,li{
margin:0;
paddgin:0;
list-style:none;
}
#idScroller *{margin:0px; padding:0px;}
#idScroller{
line-height:25px;
overflow:hidden;
}
#idScroller ul{
width:100%;
}
#idScroller li{
width:80%;
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize: function(idScroller, idScrollMid, options) {
var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.heightScroller = oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
if(this.heightList <= this.heightScroller) return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.timer = null;
this.SetOptions(options);
this.side = 1;//1是上 -1是下
switch (this.options.Side) {
case "down" :
this.side = -1;
break;
case "up" :
default :
this.side = 1;
}
addEventHandler(oScrollMid , "mouseover", function() { oScroll.Stop(); });
addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start(); });
if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) this.options.PauseStep = this.options.PauseHeight = 0;
this.Pause = 0;
this.Start();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 1,//每次变化的px量
Time: 40,//速度(越大越慢)
Side: "up",//滚动方向:"up"是上,"down"是下
PauseHeight: 0,//隔多高停一次
PauseStep: 0//停顿时间(PauseHeight大于0该参数才有效)
};
Object.extend(this.options, options || {});
},
//滚动
Scroll: function() {
var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.side;
if(this.side > 0){
if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; }
} else {
if(iScroll <= 0){ iScroll += iHeight; }
}
if(this.options.PauseHeight > 0){
if(this.Pause >= this.options.PauseHeight){
time = this.options.PauseStep;
this.Pause = 0;
} else {
this.Pause += Math.abs(iStep);
this.oScroller.scrollTop = iScroll + iStep;
}
} else { this.oScroller.scrollTop = iScroll + iStep; }
this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);
},
//开始
Start: function() {
this.Scroll();
},
//停止
Stop: function() {
clearTimeout(this.timer);
}
};window.onload = function(){
new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });
}
</script><div class="menu">
<div class="menu_title"><span>视频教程</span></div>
<div id="idScroller">
<div id="idScrollMid">
<ul>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
</ul>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单向上滚动</title>
<style type="text/css">.menu_title{
background-color:#C34B09;
color:#FFFFFF;
font-size:16px;
height:20px;
line-height:20px;
font-weight:bold;
}
.menu{
width:300px;
margin:0 auto;
border:1px solid #ECE9D8;
}
ul,li{
margin:0;
paddgin:0;
list-style:none;
}
#idScroller *{margin:0px; padding:0px;}
#idScroller{
line-height:25px;
overflow:hidden;
}
#idScroller ul{
width:100%;
}
#idScroller li{
width:80%;
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize: function(idScroller, idScrollMid, options) {
var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.heightScroller = oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
if(this.heightList <= this.heightScroller) return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.timer = null;
this.SetOptions(options);
this.side = 1;//1是上 -1是下
switch (this.options.Side) {
case "down" :
this.side = -1;
break;
case "up" :
default :
this.side = 1;
}
addEventHandler(oScrollMid , "mouseover", function() { oScroll.Stop(); });
addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start(); });
if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) this.options.PauseStep = this.options.PauseHeight = 0;
this.Pause = 0;
this.Start();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 1,//每次变化的px量
Time: 40,//速度(越大越慢)
Side: "up",//滚动方向:"up"是上,"down"是下
PauseHeight: 0,//隔多高停一次
PauseStep: 0//停顿时间(PauseHeight大于0该参数才有效)
};
Object.extend(this.options, options || {});
},
//滚动
Scroll: function() {
var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.side;
if(this.side > 0){
if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; }
} else {
if(iScroll <= 0){ iScroll += iHeight; }
}
if(this.options.PauseHeight > 0){
if(this.Pause >= this.options.PauseHeight){
time = this.options.PauseStep;
this.Pause = 0;
} else {
this.Pause += Math.abs(iStep);
this.oScroller.scrollTop = iScroll + iStep;
}
} else { this.oScroller.scrollTop = iScroll + iStep; }
this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);
},
//开始
Start: function() {
this.Scroll();
},
//停止
Stop: function() {
clearTimeout(this.timer);
}
};window.onload = function(){
new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });
}
</script><div class="menu">
<div class="menu_title"><span>视频教程</span></div>
<div id="idScroller">
<div id="idScrollMid">
<ul>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?</a></li>
</ul>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>菜单向上滚动</title> <style type="text/css">
.menu_title{ background-color:#C34B09; color:#FFFFFF; font-size:16px; height:20px; line-height:20px; font-weight:bold; }
.menu{ width:400px; margin:0 auto; border:1px solid #ECE9D8; }
ul,li{ margin:0; paddgin:0; list-style:none; }
#idScroller *{margin:0px; padding:0px;}
#idScroller{ line-height:25px; overflow:hidden;height:100px }
#idScrollMid{ line-height:25px; overflow:hidden;height:175px }
#idScroller ul{ width:100%; }
#idScroller li{ width:80%;height:25px; }
</style> </head> <body>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize: function (idScroller, idScrollMid, options) {
var oScroll = this,
oScroller = $(idScroller),
oScrollMid = $(idScrollMid);
this.heightScroller = oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
if (this.heightList <= this.heightScroller) return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.timer = null;
this.SetOptions(options);
this.side = 1; //1是上 -1是下
switch (this.options.Side) {
case "down":
this.side = -1;
break;
case "up":
default:
this.side = 1;
}
addEventHandler(oScrollMid, "mouseover", function () {
oScroll.Stop();
});
addEventHandler(oScrollMid, "mouseout", function () {
oScroll.Start();
});
if (this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) this.options.PauseStep = this.options.PauseHeight = 0;
this.Pause = 0;
this.Start();
}, //设置默认属性
SetOptions: function (options) {
this.options = { //默认值
Step: 1,//每次变化的px量
Time: 40,//速度(越大越慢)
Side: "up",//滚动方向:"up"是上,"down"是下
PauseHeight: 0,//隔多高停一次
PauseStep: 0 //停顿时间(PauseHeight大于0该参数才有效)
};
Object.extend(this.options, options || {});
},
//滚动
Scroll: function () {
var iScroll = this.oScroller.scrollTop,
iHeight = this.heightList,
time = this.options.Time,
oScroll = this,
iStep = this.options.Step * this.side;
if (this.side > 0) {
if (iScroll >= (iHeight * 2 - this.heightScroller)) {
iScroll -= iHeight;
}
} else {
if (iScroll <= 0) {
iScroll += iHeight;
}
}
if (this.options.PauseHeight > 0) {
if (this.Pause >= this.options.PauseHeight) {
time = this.options.PauseStep;
this.Pause = 0;
} else {
this.Pause += Math.abs(iStep);
this.oScroller.scrollTop = iScroll + iStep;
}
} else {
this.oScroller.scrollTop = iScroll + iStep;
}
this.timer = window.setTimeout(function () {
oScroll.Scroll();
}, time);
},
//开始
Start: function () {
this.Scroll();
},
//停止
Stop: function () {
clearTimeout(this.timer);
}
};window.onload = function () {
new Scroller("idScroller", "idScrollMid", {
PauseHeight: 25
});
}
</script>
<div class="menu">
<div class="menu_title"><span>视频教程</span></div>
<div id="idScroller">
<div id="idScrollMid">
<ul> <li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?1</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?2</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?3</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?4</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?5</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?6</a></li>
<li><a href="http://www.laoshuge.com">菜单向上滚动原来是这样做的啊?7</a></li>
</ul> <div style="clear:both"></div>
</div> </div> </div>
</body> </html>