`
rainlife
  • 浏览: 232907 次
  • 性别: Icon_minigender_1
  • 来自: 我也来自火星?
社区版块
存档分类
最新评论

鼠标控制滚动的菜单条

    博客分类:
  • JAVA
阅读更多
<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>
分享到:
评论

相关推荐

    jQuery左侧浮动跟随鼠标上下滚动菜单代码

    接着,我们来构建这个跟随鼠标滚动的菜单。菜单通常由HTML结构定义,可能包括多个`&lt;li&gt;`元素,这些元素包含链接或者其他交互元素。HTML代码示例如下: ```html &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#...

    鼠标控制菜单选择弹出

    在IT领域,鼠标控制菜单选择弹出是一种常见的交互设计技术,它使得用户可以通过鼠标操作来激活和导航应用程序的菜单系统。这种技术广泛应用于各种软件、网页和操作系统中,旨在提高用户体验,使用户能够更直观、高效...

    jqeury实现鼠标滚轮滚动无限极菜单

    在本文中,我们将深入探讨如何使用jQuery来实现一个鼠标滚轮滚动的无限极菜单,并确保其自适应不同的屏幕尺寸。这个功能在现代网页设计中非常常见,尤其适用于那些需要展示大量分类信息的网站,如电商网站的产品目录...

    as3.0滚动菜单

    在AS3.0(ActionScript 3.0)中,这种滚动菜单能够实现动态滚动效果,同时具备暂停功能,即当鼠标悬停在菜单按钮上时,滚动会暂停,提供更友好的用户体验。 ActionScript 3.0是Flash平台的核心脚本语言,相比于早期...

    js鼠标滚动自动隐藏导航菜单.zip

    "js鼠标滚动自动隐藏导航菜单" 是一种交互式设计,增强了用户体验,特别是在移动设备上,能节省屏幕空间并保持界面清晰。这种设计运用JavaScript技术,监听鼠标的滚动事件,根据滚动方向和距离动态改变导航菜单的...

    jquery scroll图片滚动菜单鼠标移动图片滚动

    最后,为了构建一个图片滚动菜单,你需要将这些图片排列在菜单区域内,通过CSS样式控制它们的初始布局。然后,结合jQuery的`mousemove`和自定义滚动函数,就能创建出鼠标移动时图片跟随滚动的动态效果。 通过以上...

    XNA 鼠标控制菜单选择

    此外,对于滚动事件,如果你的菜单有滚动条或需要多页显示,可以监听鼠标的滚轮滚动。根据`Mouse.GetState().ScrollWheelValue`的变化,更新菜单的滚动位置,使得用户可以看到更多的菜单项。 最后,要注意的是,...

    WPF 左菜单 鼠标移动 滚动 菜单 Canvas

    这个菜单不仅提供了视觉上的交互性,还能通过鼠标滚动来轻松浏览多级菜单项,极大地提升了用户体验。 首先,让我们了解一下WPF。WPF是.NET Framework的一部分,它提供了一个丰富的用户界面(UI)框架,用于构建桌面...

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    JQuery 随鼠标滚动条滚动的div

    标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能,即当用户滚动页面时,某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等,目的是...

    鼠标控制滚动菜单jquery插件特效代码

    【标题】:“鼠标控制滚动菜单jquery插件特效代码”是一个网页开发中的技术实践,它涉及到JavaScript库jQuery的应用,以及在用户交互方面的创新设计。在网页设计中,菜单通常用于导航,而滚动菜单则能更有效地利用...

    鼠标滚轮控制左右滑动

    这里的`overflow-x: auto`属性确保当内容宽度超过div时会出现水平滚动条,而`white-space: nowrap`则防止内容在div内部换行,强制它们保持在同一行上。 接下来,在`js`文件中,我们需要监听鼠标的滚轮事件。这通常...

    jQuery Scrollify 一款鼠标滚轮控制页面滚动效

    jQuery Scrollify是一款强大的JavaScript库,专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅,特别是在创建单页应用(Single Page Applications)或者设计全屏滚动网站时非常...

    伸缩菜单和自定义滚动条样式

    在网页设计中,创建动态和交互性的用户体验是至关重要的,这正是伸缩菜单和自定义滚动条样式的目的所在。这两个特性都是通过CSS3和HTML5实现的,它们为网站提供了更高级别的用户界面和视觉吸引力。 首先,让我们...

    jquery上下滚动菜单导航代码

    4. **jQuery代码**:编写JavaScript代码来监听鼠标的移动事件,判断其在导航容器内的位置,并根据需要滚动菜单。以下是一个基本的示例: ```javascript $(document).ready(function() { var navContainer = $('#...

    jQuery scroll图片滚动菜单鼠标移动图片滚动-20130629

    《jQuery scroll图片滚动菜单鼠标移动图片滚动实现详解》 在网页设计中,动态效果往往能提升用户体验,使得网站更具吸引力。jQuery作为一种强大的JavaScript库,因其简单易用的API,成为了实现此类效果的首选工具。...

    含有滚动下拉菜单的导航条

    "含有滚动下拉菜单的导航条"是一种常见的交互设计模式,尤其适用于内容丰富的网站,可以有效地组织和展示多层次的链接。这种设计使得用户无需翻页就能访问到多个级别的子页面,提升了用户体验。 首先,滚动下拉菜单...

    jQuery实现鼠标上下移动菜单垂直滚动效果.zip

    jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。

    jquery鼠标悬浮滑动下拉二级菜单代码

    jQuery,一个广泛使用的JavaScript库,提供了强大的功能来实现动态和交互性的效果,其中包括鼠标悬浮时显示的二级菜单。本文将深入探讨如何利用jQuery来创建这种下拉二级菜单的代码实现。 首先,我们需要理解基本的...

Global site tag (gtag.js) - Google Analytics