<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>
分享到:
相关推荐
接着,我们来构建这个跟随鼠标滚动的菜单。菜单通常由HTML结构定义,可能包括多个`<li>`元素,这些元素包含链接或者其他交互元素。HTML代码示例如下: ```html <li><a href="#">菜单1</a></li> <li><a href="#...
在IT领域,鼠标控制菜单选择弹出是一种常见的交互设计技术,它使得用户可以通过鼠标操作来激活和导航应用程序的菜单系统。这种技术广泛应用于各种软件、网页和操作系统中,旨在提高用户体验,使用户能够更直观、高效...
在本文中,我们将深入探讨如何使用jQuery来实现一个鼠标滚轮滚动的无限极菜单,并确保其自适应不同的屏幕尺寸。这个功能在现代网页设计中非常常见,尤其适用于那些需要展示大量分类信息的网站,如电商网站的产品目录...
在AS3.0(ActionScript 3.0)中,这种滚动菜单能够实现动态滚动效果,同时具备暂停功能,即当鼠标悬停在菜单按钮上时,滚动会暂停,提供更友好的用户体验。 ActionScript 3.0是Flash平台的核心脚本语言,相比于早期...
"js鼠标滚动自动隐藏导航菜单" 是一种交互式设计,增强了用户体验,特别是在移动设备上,能节省屏幕空间并保持界面清晰。这种设计运用JavaScript技术,监听鼠标的滚动事件,根据滚动方向和距离动态改变导航菜单的...
最后,为了构建一个图片滚动菜单,你需要将这些图片排列在菜单区域内,通过CSS样式控制它们的初始布局。然后,结合jQuery的`mousemove`和自定义滚动函数,就能创建出鼠标移动时图片跟随滚动的动态效果。 通过以上...
此外,对于滚动事件,如果你的菜单有滚动条或需要多页显示,可以监听鼠标的滚轮滚动。根据`Mouse.GetState().ScrollWheelValue`的变化,更新菜单的滚动位置,使得用户可以看到更多的菜单项。 最后,要注意的是,...
这个菜单不仅提供了视觉上的交互性,还能通过鼠标滚动来轻松浏览多级菜单项,极大地提升了用户体验。 首先,让我们了解一下WPF。WPF是.NET Framework的一部分,它提供了一个丰富的用户界面(UI)框架,用于构建桌面...
标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...
标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能,即当用户滚动页面时,某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等,目的是...
【标题】:“鼠标控制滚动菜单jquery插件特效代码”是一个网页开发中的技术实践,它涉及到JavaScript库jQuery的应用,以及在用户交互方面的创新设计。在网页设计中,菜单通常用于导航,而滚动菜单则能更有效地利用...
这里的`overflow-x: auto`属性确保当内容宽度超过div时会出现水平滚动条,而`white-space: nowrap`则防止内容在div内部换行,强制它们保持在同一行上。 接下来,在`js`文件中,我们需要监听鼠标的滚轮事件。这通常...
jQuery Scrollify是一款强大的JavaScript库,专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅,特别是在创建单页应用(Single Page Applications)或者设计全屏滚动网站时非常...
在网页设计中,创建动态和交互性的用户体验是至关重要的,这正是伸缩菜单和自定义滚动条样式的目的所在。这两个特性都是通过CSS3和HTML5实现的,它们为网站提供了更高级别的用户界面和视觉吸引力。 首先,让我们...
4. **jQuery代码**:编写JavaScript代码来监听鼠标的移动事件,判断其在导航容器内的位置,并根据需要滚动菜单。以下是一个基本的示例: ```javascript $(document).ready(function() { var navContainer = $('#...
《jQuery scroll图片滚动菜单鼠标移动图片滚动实现详解》 在网页设计中,动态效果往往能提升用户体验,使得网站更具吸引力。jQuery作为一种强大的JavaScript库,因其简单易用的API,成为了实现此类效果的首选工具。...
"含有滚动下拉菜单的导航条"是一种常见的交互设计模式,尤其适用于内容丰富的网站,可以有效地组织和展示多层次的链接。这种设计使得用户无需翻页就能访问到多个级别的子页面,提升了用户体验。 首先,滚动下拉菜单...
jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。
jQuery,一个广泛使用的JavaScript库,提供了强大的功能来实现动态和交互性的效果,其中包括鼠标悬浮时显示的二级菜单。本文将深入探讨如何利用jQuery来创建这种下拉二级菜单的代码实现。 首先,我们需要理解基本的...