搜狐首页 - 新闻 - 体育 - 娱乐 - 财经 - IT - 汽车 - 房产 - 女人 - 短信 - 彩信 - 校友录 - 邮件 - 搜索 - BBS - 搜狗 
搜狐首页 >> IT频道首页 >> 网狐教程 >> 网站制作 >> Javascript
网页菜单之---滑动菜单
2001-11-01 16:00  转自: 5D精英网
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭
这个菜单恐怕是所有菜单中制作方法最最简单的菜单了。光标移动到左边箭头上去的时候内容向左边滑动,移动到右边箭头的时候内容向右边滑动。

滑动式菜单风格

类型:内部js代码
例子:http://www.5dmedia.com/rudolf/web/web-navi1-2.htm

制作的时候直接将下面代码复制到网页HTML代码中,菜单要出现的位置就可以了
 

<style>
body{
overflow-x:hidden;
overflow-y:scroll;
}
</style>

<script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://dynamicdrive.com
*/

//配置左右箭头路径
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//配置菜单宽度
var menuwidth=300
//定义滚动速度(1-10),越大越快
var scrollspeed=6
//定义菜单内容
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://wsabstract.com">Website Abstraction</a> | <a href="http://www.codearena.com">CodeArena.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var actualwidth=''
var ns_scroll
function fillup(){
if (document.all){
test2.innerHTML=menucontents
actualwidth=test2.offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
}
window.onload=fillup

function moveleft(){
if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))
test2.style.pixelLeft-=scrollspeed
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (document.all&&test2.style.pixelLeft<0)
test2.style.pixelLeft+=scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
righttime=setTimeout("moveright()",50)
}

if (document.all||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a>&nbsp;</td>')
write('<td valign="top">')
if (document.all){
write('<span style="position:relative;width:'+menuwidth+';">')
write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')
write('<span id="test2" style="position:absolute;left:0;top:0">')
write('</span></span></span>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle">&nbsp;<a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>

 

菜单项目的修改和增加
只要直接修改上面的灰色底纹部分代码就可以了。也就是这里:

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width
var menuwidth=300
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://wsabstract.com">Website Abstraction</a> | <a href="http://www.codearena.com">CodeArena.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'

goleftimage=''指向的是左边按钮的图片。可以引号中的内容替换成为你自己的图片文件名。
gorightimage='' 指向的是右边按钮的图片。可以引号中的内容替换成为你自己的图片文件名。
menuwidth=300设定的是菜单宽度
scrollspeed=6 是滚动的速度,1-10。10最快 1最慢。
菜单项目的添加:
在menucontents中<nobr></nobr>之间添加连接形式为<a href="地址 ">菜单名称</a>

2003十大“IT风云人物”
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭





ChinaRen - 繁体版 - 搜狐招聘 - 网站登录 - 帮助中心 - 设置首页 - 广告服务 - 联系方式 - 保护隐私权 - About SOHU - 公司介绍
Copyright © 2004 Sohu.com Inc. All rights reserved. 搜狐公司 版权所有

相关连接

 ■ 我来说两句
用  户:        匿名发出:
请各位遵纪守法并注意语言文明。
 
*经营许可证编号:京ICP00000008号
*《互联网电子公告服务管理规定》
*《全国人大常委会关于维护互联网安全的规定》
短信内容:
手 机
自写包月5分钱/条 更多>>
搜狐天气为你抢先报! 魔力占卜姻缘一线牵!
金币不是赚的是抢的! 爱情玄机任由你游戏!
猪八戒这样泡到紫霞! 帅哥一定要看的宝典!
你受哪颗星星的庇护? 萨达姆最新关押照片!
精彩彩信
[和弦]欧若拉 一生有你
沧海一声笑
[音效]挪威的森林
爆铃 MP3 G点图 动画
[和弦]童话 你到底爱谁
[原唱]一千年以后 断点
[爆笑音效]赚钱拉 野花
[串烧]张韶涵 潘玮柏
精彩短信
[和弦]小薇 好心分手
[音效]当当当当 忘记


搜狐商城
·家电|品牌风扇新品热销
·音乐|秦海璐幸福回味
·图书|《眼镜蛇事件》
更多...