自己用javascrpt写的像淘宝首页的间隔性滚动的效果
2008-04-08 12:18
423 查看
昨天收到一个小功能的需求实现像淘宝首页的间隔性滚动的效果，结果碰到一个小小的问题，想起看过一篇李战老师的悟透javascript，于是在园子里搜到李老师的文章，重新拜读了一遍，但由于本人天资愚昧，还是未能悟出个究竟，不得已，向李老师求救，终于，在李老师的指点下，解决了这个小问题，在这里再次感谢李战老师。
想来想去，先让大家看看效果，再看看有没有看下去的必要吧。
'+document.getElementById('jscode').innerText+'' + document.getElementById('htmlcode').innerText);" type=button value=查看效果>
用法很简单：
var scroll = new ScrollText("content","pre","next",true);
第一个参数是滚动区的id,第二个是显示上一条的按钮的id,第三个是显示下一条的按钮的id,第四个是是否直接开始滚动，为false的话后面再scroll.Start()就OK了。
废话不说了，贴代码吧。
我第一次发贴，不懂排版，直接贴了。
ScrollText.js
function ScrollText(content,btnPrevious,btnNext,autoStart)
{
this.Speed = 10;
this.Timeout = 1500;
this.LineHeight = 20;
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
this.NextButton.onclick = this.GetFunction(this,"Next");
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.NextButton.onmouseover = this.GetFunction(this,"Stop");
this.NextButton.onmouseout = this.GetFunction(this,"Start");
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");
this.ScrollContent.onmouseout = this.GetFunction(this,"Start");
this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");
this.PreviousButton.onmouseout = this.GetFunction(this,"Start");
if(autoStart)
{
this.Start();
}
}
ScrollText.prototype.$ = function(element)
{
return document.getElementById(element);
}
ScrollText.prototype.Previous = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("up");
}
ScrollText.prototype.Next = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("down");
}
ScrollText.prototype.Start = function()
{
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
ScrollText.prototype.Stop = function()
{
clearTimeout(this.AutoScrollTimer);
}
ScrollText.prototype.AutoScroll = function()
{
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;
}
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
}
ScrollText.prototype.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;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
}
}
ScrollText.prototype.GetFunction = function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
Demo.Htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="ScrollText.js"></script>
</head>
<body>
<div id="pre" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↑</div>
<div id="content" style="height:20px;line-height:20px;overflow:hidden;float:left;width:120px;border:solid 1px #0000FF;">
hello1........<br>
hello2........<br>
hello3........<br>
hello4........<br>
hello5........<br>
hello6........<br>
hello7........<br>
hello8........<br>
</div>
<div id="next" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↓</div>
<script language="javascript" type="text/javascript">
var scroll = new ScrollText("content","pre","next",true);
</script>
</body>
</html>
'+document.getElementById('jscode').innerText+'' + document.getElementById('htmlcode').innerText);" type=button value=查看效果>
功能比较简单，用得着的就拿去吧。 新增加Demo源码下载。
想来想去，先让大家看看效果，再看看有没有看下去的必要吧。
'+document.getElementById('jscode').innerText+'' + document.getElementById('htmlcode').innerText);" type=button value=查看效果>
用法很简单：
var scroll = new ScrollText("content","pre","next",true);
第一个参数是滚动区的id,第二个是显示上一条的按钮的id,第三个是显示下一条的按钮的id,第四个是是否直接开始滚动，为false的话后面再scroll.Start()就OK了。
废话不说了，贴代码吧。
我第一次发贴，不懂排版，直接贴了。
ScrollText.js
function ScrollText(content,btnPrevious,btnNext,autoStart)
{
this.Speed = 10;
this.Timeout = 1500;
this.LineHeight = 20;
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
this.NextButton.onclick = this.GetFunction(this,"Next");
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.NextButton.onmouseover = this.GetFunction(this,"Stop");
this.NextButton.onmouseout = this.GetFunction(this,"Start");
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");
this.ScrollContent.onmouseout = this.GetFunction(this,"Start");
this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");
this.PreviousButton.onmouseout = this.GetFunction(this,"Start");
if(autoStart)
{
this.Start();
}
}
ScrollText.prototype.$ = function(element)
{
return document.getElementById(element);
}
ScrollText.prototype.Previous = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("up");
}
ScrollText.prototype.Next = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("down");
}
ScrollText.prototype.Start = function()
{
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
ScrollText.prototype.Stop = function()
{
clearTimeout(this.AutoScrollTimer);
}
ScrollText.prototype.AutoScroll = function()
{
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;
}
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
}
ScrollText.prototype.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;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
}
}
ScrollText.prototype.GetFunction = function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
Demo.Htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="ScrollText.js"></script>
</head>
<body>
<div id="pre" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↑</div>
<div id="content" style="height:20px;line-height:20px;overflow:hidden;float:left;width:120px;border:solid 1px #0000FF;">
hello1........<br>
hello2........<br>
hello3........<br>
hello4........<br>
hello5........<br>
hello6........<br>
hello7........<br>
hello8........<br>
</div>
<div id="next" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↓</div>
<script language="javascript" type="text/javascript">
var scroll = new ScrollText("content","pre","next",true);
</script>
</body>
</html>
'+document.getElementById('jscode').innerText+'' + document.getElementById('htmlcode').innerText);" type=button value=查看效果>
功能比较简单，用得着的就拿去吧。 新增加Demo源码下载。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [导入]自己用javascrpt写的像淘宝首页的间隔性滚动的效果
- Android仿淘宝首页头条View垂直滚动效果
- js实现淘宝首页图片轮播效果(修正图片滚动顺序的问题)
- 仿淘宝首页的淘宝头条View垂直滚动
- JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
- [转载] 模仿淘宝列表页面的工具栏随屏幕滚动效果
- 首页自动滚动显示效果
- 仿淘宝首页的淘宝头条垂直滚动
- 模拟新浪微博首页滚动效果
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- Android仿淘宝头条向上滚动广告条的效果ViewFlipper
- 完善as3图片上下切换，自己滚动效果
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- 首页垂直滚动TextView广告效果，使用TextSwicher+animation实现
- 原生js实现淘宝首页回到顶部效果
- 仿淘宝首页分类列表效果实现代码
- CSS仿淘宝首页导航条按钮布局效果
- 天猫首页分类随着滚动事件展示效果
- DelphiXE10.2.3 Android仿淘宝首页广告图片启动切换的自定义多可视化对象左右滚动组件（持续更新中）
- 类似新浪首页的垂直滚动效果