JS实现“鼠标控制局部文字滚动效果”研究

最新推荐文章于 2024-07-22 17:30:43 发布

大猫钓鱼

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量3k

点赞数

分类专栏： JavaScript 文章标签： function scroll timer opera javascript filter

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

//文章作者：心晴（欢迎转载，希望转载前通知一声：brothercat@126.com）

//代码来源：新浪体育

实现效果：当鼠标移到“向上按键”时文字内容向下滚动，当鼠标移到“向下按键”时文字内容向上滚动。

基本思想：框架、层、样式、JS来实现效果。

备注：文字内容可以是动态的也可以是静态的。

框架：用来嵌入动态或静态的文字内容。代码如下：

层：除了JS外这是模拟滚动效果的关键。说白了，也就是“层在滚动”。要实现层滚动的效果，我们至少需要两个层，代码如下：

样式：接下来是层的样式，之所以不在<div>里直接写，是因为我们需要更好地展现代码层次感，一幕了然是最好的了。

样式这样写的道理：先了解一下absolute和relative的作用，参考如下position参数表：

position 参数说明
position 参数 / 参数说明	absolute	relative	static(预设值)	fixed
中文意义	绝对位置	相对位置	静态位置	固定位置
书面未知参考标准	父元素内容区边界	原本应该在的位置	不变	不指定：原本应该在的位置指定：窗口最大可视范围边界 (或框架边界)
移动参考标准	文件	文件	文件	窗口最大可视范围
可改变显示位置	是	是	否	是
可调整大小	是	display 为block ：是 display 为inline ：否	display 为block ：是 display 为inline ：否	是
从显示流程中去除	是	否	否	是

从定义的样式可见：divText层是绝对定位，而它的父元素即divScrollTextCont是相对定位。divScrollTextCont相当于一个遮罩（做过FLASH的朋友应该了解这个概念），通过visibility属性来控制divScrollTextCont的可视性，通过overflow属性来控制它在指定范围外溢出部分的隐藏，而指定范围即clip:rect(0px 129px 58px 0px)则规定了divScrollTextCont的可视范围。这个可视范围应和divText层始终保持一致，这样才可以达到滚动起来但不抖动的效果。

JS：神奇的JavaScript将发挥作用了。下面的代码便是帮我们把框架、层以及样式有机结合起来：

我们知道现在浏览器种类很多，如：IE(4.0,5.0,6.0)，Netscape，Opera，Firefox等，而他们支持JS的能力又各不相同，所以，为了在大部分主流浏览器都能顺利完成“鼠标控制局部文字滚动效果”，还是照新浪Coder们写的用JS预判和设置一下运行环境，代码如下：

function lib_bwcheck()
{
this.ver=navigator.appVersion;
this.agent=navigator.userAgent;
this.dom=document.getElementById?1:0;
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6;
this.mac=this.agent.indexOf("Mac")>-1 ;
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);
return this
}
var bw=new lib_bwcheck();

以下是实现详细过程，鄙人自己尚未研究透彻，不敢造次。鼠标控制遮罩的核心代码如下：

//控制鼠标悬停时层的滚动速度
var speed = 30;

var loop, timer;

//建立遮罩
function makeObj(obj,nest)
{
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight;
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight;
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x=0; this.y=0;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}

//在netscape和opera里单位px兼容问题的解决
var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y)
{
this.x = x;
this.y = y;
this.css.left = this.x+px;
this.css.top = this.y+px;
}

//向下滚动
function goDown(move)
{
if (this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".down("+move+")",speed)
}
}

//向上滚动
function goUp(move)
{
if (this.y<0){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

//鼠标悬停滚动
function scroll(speed)
{
if (scrolltextLoaded){
loop = true;
if (speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}

//鼠标离开不滚动
function noScroll()
{
loop = false;
if (timer) clearTimeout(timer)
}

var scrolltextLoaded = false;

//加载divScrollTextCont和divText层
function scrolltextInit()
{
oCont = new makeObj('divScrollTextCont');
oScroll = new makeObj('divText','divScrollTextCont');
oScroll.moveIt(0,0);
oCont.css.visibility = "visible";
scrolltextLoaded = true;
}

//如果浏览器支持此JS显示效果则加载它
if (bw.bw) onload = scrolltextInit

JS代码就这样写完了，整体架构思路很清晰，但具体实现起来对Coder的要求还是很高的。
下面是“向上按键”和“向下按键”图片以及响应事件加入的代码：

只需Arrow.gif一张图片通过filter:flipV可以倒置，这样上下两箭头都可以搞定了。onmouseover和onmouseout将响应鼠标的悬停和离开事件。

至此，利用JavaScript实现“鼠标控制局部文字滚动效果”研究就告一段落了。从这个例子可以看出思想和实际操作一样重要。

///

以下附完整代码：

<html>

<body>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck()
{
this.ver=navigator.appVersion;
this.agent=navigator.userAgent;
this.dom=document.getElementById?1:0;
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6;
this.mac=this.agent.indexOf("Mac")>-1 ;
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);
return this
}
var bw=new lib_bwcheck();

下面是鼠标控制遮罩的核心代码：

function moveIt(x,y)
{
this.x = x;
this.y = y;
this.css.left = this.x+px;
this.css.top = this.y+px;
}

</script>

//实现滚动效果的层样式
<style type="text/css">
#divScrollTextCont {position:relative; width:129px; height:58px; clip:rect(0px 129px 58px 0px); overflow:hidden; visibility:hidden;}
#divText {position:absolute; left:0px; top:0px;}
</style>

//模拟滚动的遮罩层
<div id="divScrollTextCont">
<div id="divText">
<iframe src="content.asp" width=" " height=" " frameborder="0"></iframe>
</div>
</div>

//按钮所在表格，可自行修改位置。换成层定位效果也不错。
<table width=13 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=13 height=30 valign=bottom><img src="Arrow.gif" width="10" height="11" style='cursor:hand;' onmouseover="scroll(-2)" onmouseout="noScroll()"></td>
</tr>
<tr>
<td height=45 valign=bottom><img src="Arrow.gif" width="10" height="11" style="filter:flipV" onmouseover="scroll(2)" onmouseout="noScroll()"></td>
</tr>
</table>
</body>