[网网秀]Javascript代码碎片四（导航{tx}） - 无边尘事皆忘却,只有雪花 ...企业库|免费b2b网站

[网网秀]Javascript代码碎片四（导航{tx}） - 无边尘事皆忘却,只有雪花 ...

[网网秀]Javascript代码碎片四（导航{tx}） [原创 2010-03-20 18:35:52] 删除...

4-1 折叠展开收缩效果的栏目分类导航

<tr>

</tr>

<tr>

<!--

var number=8;

function LMYC() {

var lbmc;

//var treePic;

for (i=1;i<=number;i++) {

lbmc = eval('LM' + i);

//treePic = eval('treePic'+i);

//treePic.src = 'images/file.gif';

lbmc.style.display = 'none';

}

function ShowFLT(i) {

lbmc = eval('LM' + i);

//treePic = eval('treePic' + i)

if (lbmc.style.display == 'none') {

LMYC();

//treePic.src = 'images/nofile.gif';

lbmc.style.display = '';

}

else {

//treePic.src = 'images/file.gif';

lbmc.style.display = 'none';

}

//-->

</script>

<tr>

文管产品</a> </td>

</tr>

<td>

<tr>

文件夹</a> </td>

</tr>

<tr>

</tr>

<tr>

资料册</a> </td>

</tr>

<tr>

</tr>

<tr>

档案盒</a> </td>

</tr>

<tr>

</tr>

<tr>

文件盒</a> </td>

</tr>

<tr>

</tr>

<tr>

文件柜</a> </td>

</tr>

<tr>

</tr>

<tr>

公文包</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

桌面文具</a> </td>

</tr>

<td>

<tr>

削笔机</a> </td>

</tr>

<tr>

</tr>

<tr>

订书机</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

商用机器</a> </td>

</tr>

<td>

<tr>

碎纸机</a> </td>

</tr>

<tr>

</tr>

<tr>

切纸刀</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

书写工具</a> </td>

</tr>

<td>

<tr>

中性笔</a> </td>

</tr>

<tr>

</tr>

<tr>

圆珠笔</a> </td>

</tr>

<tr>

</tr>

<tr>

记号笔</a> </td>

</tr>

<tr>

</tr>

<tr>

白板笔</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

纸制品</a> </td>

</tr>

<td>

<tr>

传真纸</a> </td>

</tr>

<tr>

</tr>

<tr>

复印纸</a> </td>

</tr>

<tr>

</tr>

<tr>

复写纸</a> </td>

</tr>

<tr>

</tr>

<tr>

便条纸</a> </td>

</tr>

<tr>

</tr>

<tr>

百事贴</a> </td>

</tr>

<tr>

</tr>

<tr>

皮面笔记本</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

办公电子</a> </td>

</tr>

<td>

<tr>

计算器</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

IT周边产品</a> </td>

</tr>

<td>

<tr>

阅读架</a> </td>

</tr>

<tr>

</tr>

<tr>

CD保护</a> </td>

</tr>

<tr>

</tr>

<tr>

光盘盒</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

办公生活用品</a> </td>

</tr>

<td>

<tr>

清洁桶</a> </td>

</tr>

<tr>

</tr>

<tr>

白板</a> </td>

</tr>

<tr>

</tr>

<tr>

网状文具</a> </td>

</tr>

<tr>

</tr>

<tr>

封箱器</a> </td>

</tr>

<tr>

</tr>

<tr>

购物袋</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

4-2 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果

function move(x, y) {

if (document.all) {

object1.style.pixelLeft += x;

object1.style.pixelTop += y;}

else

if (document.layers) {

document.object1.left += x;

document.object1.top += y;

}};

function position() {

document.object1.left += -200;

document.object1.top += 0;

document.object1.visibility = "show"

};

function makeStatic() {

if (document.all) {object1.style.pixelTop=document.body.scrollTop+100}

else {eval('document.object1.top=eval(window.pageYOffset+20)');}

setTimeout("makeStatic()",0);}

</script>

if (document.all)

document.write('<DIV ID="object1" style="Position : Absolute ;Left : -125px ;Top : 20px ;Width : 0px ;Z-Index : 20">')

</script>

<tr>

<tr>

</tr>

<tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<!--

if (document.all||document.layers)

makeStatic();

if (document.layers) {

window.onload=position;

}

var sitems=new Array();

var sitemlinks=new Array();

function hl(n) {

n.className='hl'}

function n(h) {

h.className='n'}

//--></script>

</table>

if (document.all)

document.write('<\/DIV>')

</script>

</layer>

4-3 左右交叉合并导航效果

<!-- Beginning of JavaScript -

// Edit your messages. You can add as many messages a you like.

var message = new Array()

message[0]="欢迎光临国内{zd0}的新闻站点---新浪网!"

message[1]="欢迎光临国内{zd0}的综合性站点---网易!"

message[2]="欢迎光临国内{zd0}的搜索引擎站点---搜狐!"

message[3]="欢迎光临国内{zd0}的游戏站点---第九城市!"

// 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 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>

<!-- 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>

郑重声明：资讯【[网网秀]Javascript代码碎片四（导航{tx}） - 无边尘事皆忘却,只有雪花 ...】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——