网站首页
|
新闻
|
软件
|
Vista
|
硬件DIY
|
设计
|
欣赏
|
网络
|
病毒
|
开发
|
数据库
|
考试
|
英语
|
听力
|
范文
|
作文
|
管理
|
营销
|
专题
|
视频教程
|
网站地图
开发教室
程序设计
|
Delphi
|
Java
|
C++
|
VB
|
.NET
|
Css
|
Js
|
PHP
|
ASP
|
MySQL
|
数据库
|
WEB开发
|
网页特效
|
视频
首页
>
开发教室
>
网页特效
>
导航菜单
> 正文
开发教室
左右交叉合并导航效果
2007-03-08 源自:
IT粉丝网
网友评论
0
条
进入视频教程
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页<a href='http://www.itfensi.com/exploit/web/' target='_blank' class='infotextkey'>特效</a>代码|itFensi.com|---左右交叉合并导航效果</title></head><BODY onload=initiate()><script><!-- Beginning of JavaScript -// Edit your messages. You can add as many messages a you like.var message = new Array()message[0]="欢迎光临国内最大的<a href='http://www.itfensi.com/soft/internet/' target='_blank' class='infotextkey'>新闻</a>站点---新浪网!"message[1]="欢迎光临国内最大的综合性站点---网易!"message[2]="欢迎光临国内最大的<a href='http://www.itfensi.com/sell/Search/' target='_blank' class='infotextkey'>搜索引擎</a>站点---搜狐!"message[3]="欢迎光临国内最大的游戏站点---第九城市!"// The links of your messages. Be sure that you configure as many links as messages.// If don't want to link your messages write '#' instead of an URL (see last sample).var messageurl = new Array()messageurl[0]="http://../www.sina.com.cn/default.htm"messageurl[1]="http://../www.163.com/default.htm"messageurl[2]="http://../www.sohu.com/default.htm"messageurl[3]="http://../www.the9.com/default.htm"var messagetarget=new Array()messagetarget[0]="_blank"messagetarget[1]="_blank"messagetarget[2]="_blank"messagetarget[3]="_blank"// The width of your textbox (pixels).// Be sure that 'textwidth' is slightly bigger than the 'width' configured inside the stylesheetvar textwidth=260// The height of your textbox (pixels)// Be sure that 'textheight' is slightly bigger than the 'height' configured inside the stylesheetvar textheight=75// Final horizontal position of the textbox: distance to the left margin of the window (pixels)// IMPORTANT:// if you want to center the textbox in the middle of the browser-window then write -1.// If you want to place the textbox on an absolute position// then write the number (for instance 223).var x_finalpos=-1// Final vertical position of the textbox: distance to the top margin of the windowvar y_finalpos=20// Total number of textslicesvar textslices=10// Standstill of textbox (seconds)var pausetext=5// Speed of horizontal glidingvar step=10var pause=40// Do not edit the variables below this linevar x_rightspans=0var x_leftspans=0var marginrightvar marginleftvar height_slice=Math.floor(textheight/textslices)var cliptop=0var clipbottom=cliptop+height_slicevar clipleft=0var clipright=textwidthvar spannummer=0var spannrbefore=0var i_message=0pausetext=pausetext*1000function initiate() {if (document.all) {if (x_finalpos==-1) {x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)}changemessage()}}function changemessage() {for (i=0;i<=textslices-1;i++) {var thisspan=eval("span"+i)thisspan.innerHTML="<a href='"+messageurl[i_message]+"' target='blank'>"+message[i_message]+"</a>"}gostartposition()}function gostartposition() {for (i=0;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=marginright}for (i=1;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=marginleft}moveslices_IE()}function moveslices_IE() {if (x_rightspans==0 || x_leftspans==0) {if (x_rightspans==0) {for (i=0;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft-=step}if (thisspan.posLeft<=x_finalpos) {x_rightspans=1for (i=0;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}if (x_leftspans==0) {for (i=1;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft+=step}if (thisspan.posLeft>=x_finalpos) {x_leftspans=1for (i=1;i<=textslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}var timer=setTimeout("moveslices_IE()",pause)}else {clearTimeout(timer)x_rightspans=0x_leftspans=0i_message++if (i_message > message.length-1) {i_message=0}var timer=setTimeout("changemessage()",pausetext)}}// - End of JavaScript - --></script><style>A {color : red;text-decoration : none}A:hover {color : white;text-decoration : none}.textbox {font-size : 18;font-family : Verdana;font-style : normal;color : red;border-width : 4;text-align : center;background-color : blue;border-style : solid;padding : 5;height : 65;width : 250;overflow : clip;font-weight : bold;}</style><script><!-- Beginning of JavaScript -// Do not edit this script-blockif (document.all) {for (i=0;i<=textslices-1;i+=2) {marginright=document.body.clientWidth+50document.write("<span class='textbox' id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}cliptop=height_sliceclipbottom=2*height_slicefor (i=1;i<=textslices-1;i+=2) {marginleft=-textwidth-50document.write("<span class='textbox' id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginleft+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}}// - End of JavaScript - --></script><div style="position: absolute; top: -25; left: 9; width: 717; height: 19"></div></body></html>
提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
上一篇：
极品效果-3dapple菜单
下一篇：
媲美Flash的JS导航菜单
内容评论
文章纠错
发送朋友
收藏本文
复制本文链接(URL)发送给朋友：
相关内容
左右移动的图片
2007-03-08
使图片左右（上下）方向翻转
2007-03-08
禁用鼠标左右键（一）
2007-03-08
网页中如何让整段文字左右对齐
2007-02-09
两个表格[Table]可以左右排放吗
2007-02-09
实现窗体内部的左右移动
2007-02-05
一些左右你网页水平的教程
2007-02-01
评论
点击查看
通行证
密码
匿名发表
开发频道推荐
PHPnow轻松打造专业PHP服务器环境
轻松建立自己的网站 动易系统帮你完成
jsp环境下FCKeditor编辑器的应用
php教程：php设计模式介绍之单条模式
开发热点文章
模拟QQ菜单效果
非常酷的五星展开菜单显示效果
很酷的屏幕翻滚导航
滑出式菜单
经典实用的触发型导航菜单
进入页面选择式导航
腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二
仿蓝色理想网站的导航菜单
网页上模仿桌面右键菜单
文件夹式的菜单
编程开发视频
电脑维修视频
Visual Studio Team System面面观系列课程
Visual Studio .NET C#视频教程
2008 Powerpcb 5.0视频教程
PRTOEL99 SE在线视频教合集
UG4.0编程视频教程
Visual Studio NET 2008 开发特性视频教程
C语言视频教程(曾怡)
数据库基础讲座
数据结构课程-电子科技大学版
Delphi经典编程视频教程
HTTP基本操作实例教程
JPS基本操作实例教程
DOS基本命令视频教程
windows组策略使用视频
路由设置教程
微软mcse认证视频教程
Exchange Server 2007系列课程
windows2003从入门到精通系列
Windows原理 视频教程
计算机组成原理视频
ccna认证教程
网络安全视频教程 上海交大
freebsd视频教程
架设流媒体服务器
关于iT粉丝
/
大事记
/
广告服务
/
联系我们
/
网站地图
/
友情链接
/
用户注册
/
版权声明
/
加入我们
itFensi.com All Rights Reserved 版权所有·IT粉丝网
© 2006 - 2008
