|
|
| 左右交叉合并导航效果 |
| 整理：Cnwshow.Com 来源：Internet 整理时间：2008-5-30 |
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>左右交叉合并导航效果</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]="欢迎光临国内最大的新闻站点---新浪网!"
message[1]="欢迎光临国内最大的综合性站点---网易!"
message[2]="欢迎光临国内最大的搜索引擎站点---搜狐!"
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"
messageurl[1]="http://www.163.com"
messageurl[2]="http://www.sohu.com"
messageurl[3]="http://www.cnwshow.com"
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 stylesheet
var textwidth=260
// The height of your textbox (pixels)
// Be sure that 'textheight' is slightly bigger than the 'height' configured inside the stylesheet
var 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 window
var y_finalpos=20
// Total number of textslices
var textslices=10
// Standstill of textbox (seconds)
var pausetext=5
// Speed of horizontal gliding
var step=10
var pause=40
// Do not edit the variables below this line
var x_rightspans=0
var x_leftspans=0
var marginright
var marginleft
var height_slice=Math.floor(textheight/textslices)
var cliptop=0
var clipbottom=cliptop+height_slice
var clipleft=0
var clipright=textwidth
var spannummer=0
var spannrbefore=0
var i_message=0
pausetext=pausetext*1000
function 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=1
for (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=1
for (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=0
x_leftspans=0
i_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-block
if (document.all) {
for (i=0;i<=textslices-1;i+=2) {
marginright=document.body.clientWidth+50
document.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_slice
clipbottom+=2*height_slice
}
cliptop=height_slice
clipbottom=2*height_slice
for (i=1;i<=textslices-1;i+=2) {
marginleft=-textwidth-50
document.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_slice
clipbottom+=2*height_slice
}
}
// - End of JavaScript - -->
</script>
<div style="position: absolute; top: -25; left: 9; width: 717; height: 19">
</div>
</body>
</html>
|
|
|
|
|
|
