鼠标控制滚动的菜单条

rainlife

浏览: 233391 次
性别:
来自: 我也来自火星？

最近访客更多访客>>

maysut

zjy_369

johnny-miao

jimichan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA

CSS IE

<html>
<head>
<style>
    body {
        background-color: #FFFFFF
    }

    A {
        color: Navy;
        text-decoration: none
    }

    A:hover {
        color: red
    }

    A:visited: {
        color: #808080
    }

    TD {
        font-family: arial, helvetica;
        font-size: 10pt
    }

    #divBg {
        position: absolute;
        z-index: 10;
        width: 200;
        left: 0;
        height: 100;
        clip: rect( 0, 10, 10, 0 )
    }

    #divMenu {
        position: absolute;
        left: 15;
        top: 6;
        font-weight: bold
    }

    #divArrowLeft {
        position: absolute;
        width: 20;
        height: 20;
        left: 0;
        top: 9
    }

    #divArrowRight {
        position: absolute;
        width: 20;
        height: 20;
        top: 9
    }
</style>
<script>

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

//The height of the menu
menuHeight = 22

//Width of the arrows
arrowWidth = 16

//Scroll speed: (in milliseconds, change this one and the next variable to change the speed)
scrollSpeed = 20

//Pixels to scroll per timeout.
scrollPx = 10

/**************************************************************************
 Scrolling functions
 ***************************************************************************/
var tim;
var noScroll = true
function mLeft() {
    if (!noScroll && oMenu.x < arrowWidth) {
        oMenu.moveBy(scrollPx, 0)
        tim = setTimeout("mLeft()", scrollSpeed)
    }
}
function mRight() {
    if (!noScroll && oMenu.x > -(oMenu.scrollWidth - (pageWidth)) - arrowWidth) {
        oMenu.moveBy(-scrollPx, 0)
        tim = setTimeout("mRight()", scrollSpeed)
    }
}
function noMove() {
    clearTimeout(tim);
    noScroll = true
}
/**************************************************************************
 Object part
 ***************************************************************************/
function makeObj(obj, nest, num) {
    nest = (!nest) ? '':'document.' + nest + '.'

    this.css = (n) ? eval(nest + 'document.' + obj):eval('document.all.' + obj + '.style')
    this.evnt = (n)? eval(nest + 'document.' + obj):eval(obj);
    this.scrollWidth = n?this.css.document.width:this.evnt.offsetWidth
    this.x = (n)? this.css.left:this.evnt.offsetLeft;
    this.y = (n)?
             this.css.top:this.evnt.offsetTop;
    this.moveBy = b_moveBy;
    this.moveIt = b_moveIt;
    this.showIt = b_showIt;
    this.clipTo = b_clipTo;
    return this
}
function b_moveBy(x, y) {
    this.x = this.x + x;
    this.y = this.y + y;
    this.css.left = this.x;
    this.css.top = this.y
}

function b_moveIt(x, y) {
    this.x = x;
    this.y = y;
    this.css.left = this.x;
    this.css.top = this.y
}

function b_clipTo(t, r, b, l) {
    if (n) {
        this.css.clip.top = t;
        this.css.clip.right = r;
        this.css.clip.bottom = b;
        this.css.clip.left = l
    } else
        this.css.clip = "rect(" + t + "," + r + "," + b + "," + l + ")";
}

function b_showIt() {
    this.css.visibility = "visible"
}
/**************************************************************************
 Object part end
 ***************************************************************************/

/**************************************************************************
 Init function. Set the placements of the objects here.
 ***************************************************************************/
function side_init() {
    //Width of the menu, Currently set to the width of the document.
    //If you want the menu to be 500px wide for instance, just 
    //set the the pageWidth=500 in stead.
    pageWidth = (n)?innerWidth:document.body.offsetWidth - 20;

    oBg = new makeObj('divBg')
    oMenu = new makeObj('divMenu', 'divBg')
    oArrowRight = new makeObj('divArrowRight', 'divBg')
    //Placement
    oBg.moveIt(0, 0) //Main div, holds all the other divs.
    oMenu.moveIt(arrowWidth, 6)
    oArrowRight.moveIt(pageWidth - arrowWidth, 9)
    //setting the width and the visible area of the links.
    if (ie) {
        oBg.css.width = pageWidth;
        oBg.css.overflow = "hidden"
    }
    oBg.clipTo(0, pageWidth, menuHeight, 0)
}
//executing the init function on pageload.
onload = side_init;
</script>

</head>

<body>
<div id="divBg">
    <div id="divMenu">
        <table>
            <tr>
                <td nowrap>
                    [<a href="#">link 1</a>] ?
                    [<a href="#">link 2</a>] ?
                    [<a href="#">link 3</a>] ?
                    [<a href="#">link 4</a>] ?
                    [<a href="#">link 5</a>] ?
                    [<a href="#">link 6</a>] ?
                    [<a href="#">link 7</a>] ?
                    [<a href="#">link 8</a>] ?
                    [<a href="#">link 9</a>] ?
                    [<a href="#">link 10</a>] ?
                    [<a href="#">link 11</a>] ?
                    [<a href="#">link 12</a>] ?
                    [<a href="#">link 13</a>] ?
                    [<a href="#">link 14</a>] ?
                    [<a href="#">link 15</a>] ?
                    [<a href="#">link 16</a>] ?
                    [<a href="#">link 17</a>] ?
                    [<a href="#">link 18</a>] ?
                    [<a href="#">link 19</a>] ?
                    [<a href="#">link 20</a>] ?
                    [<a href="#">link 21</a>] ?
                    [<a href="#">link 22</a>] ?
                    [<a href="#">link 23</a>] ?
                    [<a href="#">link 24</a>] ?
                    [<a href="#">link 25</a>] ?
                    [<a href="#">link 26</a>] ?
                    [<a href="#">link 27</a>] ?
                    [<a href="#">link 28</a>] ?
                    [<a href="#">link 29</a>] ?
                    [<a href="#">link 30</a>]
                </td>
            </tr>
        </table>
    </div>

    <div id="divArrowLeft"><a href="javascript://" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()">
    	<img src="images/013-r.gif" width=16 height=16 border=0></A></div>

    <div id="divArrowRight"><a href="javascript://" onmouseover="noScroll=false; mRight()" onmouseout="noMove()">
    	<img src="images/013-l.gif" width=16 height=16 border=0></a></div>
</div>
</body>
</html>

分享到：

显示 Hibernate SQL 语句中 ? 的值 | 出租司机给我上的MBA课

2007-07-03 15:20
浏览 1428
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标控制滚动的菜单条

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标控制滚动的菜单条

评论

发表评论

相关推荐

vim补全

一次小项目的思考

IntelliJ Idea插件Jetty Integration恢复开发

PowerDesigner 中将Comment(注释)及Name(名称)内容互相COPY的VBS代码

使用VisualSVN Server构建自己的版本库

在laszlo方法中使用参数

openlasz入门---openlaszlo环境的建立

Openlaszlo调用JavaRPC和JAVA类通信

使用 JavaMail 收发邮件,解决中文附件问题

FCKEditor使用说明

一个不错的开源数据库H2

JAVA获取系统当前的用户

FCKeditor插件开发

Idea8试用

HtmlUnit测试页面

java的数据结构

P6SPY监控数据库性能

Idea7.0注册机

[转]普元JS验证

Apache和Subversion搭建版本控制环境

最近访客更多访客>>