|
文/洪宝光 怎样设计一个眩目链接效果是站长所关心话题之一，它直接会影响到主页的访问量！下面是我所了解的一些链接技巧！
一、 文字链接
当你单击链接时，先会出现一段文字，然后接着链接到你所要访问地址！给人一种动感的效果！
代码如下：
<SCRIPT language="JavaScript">
<!--
function MM_showHideLayers() { //v2.0
var i, visStr, args, theObj;
args = MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) { //with arg triples (objNS,objIE,visStr)
visStr = args[i+2];
if (navigator.appName == "Netscape" && document.layers != null) {
theObj = eval(args[i]);
if (theObj) theObj.visibility = visStr;
} else if (document.all != null) { //IE
if (visStr == "show") visStr = "visible"; //convert vals
if (visStr == "hide") visStr = "hidden";
theObj = eval(args[i+1]);
if (theObj) theObj.style.visibility = visStr;
} }
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++)
if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
//-->
</SCRIPT>
<!--第二步:在<body>区中加入如下代码-->
<div id="Layer1" style="position:absolute;
left:240px; top:175px; width:306px; height:63px; z-index:1; visibility: hidden"><a href="javascript.zip"><font color=green size="5" face="隶书">赛迪网！</font></a></div>
<div id="Layer2" style="position:absolute; left:280px; top:237px; width:147px; height:82px; z-index:2; visibility: visible">
<p align="center"><a href="http://www.ccidnet.com" target="_blank">
<img SRC="1.jpg" border="0" onMouseDown="MM_showHideLayers("document.layers["Layer1"]",
"document.all["Layer1"]","show")"></a><br>
</p>
</div> |
二、 滚动链接
当你的鼠标一放上去时，链接文字就会不断地滚动，心动了吧！
代码如下：
<SCRIPT LANGUAGE="JavaScript">
<!--
var a,b,go,word;
function greenlight(word){
a="赛迪网--电脑应用";
word.style.color="red";
linkSwitch();
}
function linkSwitch(){
clearTimeout(go);
b=a;
a=a.substring(1,100)+a.charAt(0);
esh.innerText=a;
go=setTimeout("linkSwitch()",100);
}
function stp(word){
clearTimeout(go);
esh.innerText="赛迪网--电脑应用";
word.style.color="blue";
}
//-->
</SCRIPT>
<!--第二步:把如下代码加入<body>区域中-->
<A HREF=" http://www.ccidnet.com/school/" onmouseover="greenlight(this)" onmouseout="stp(this)" ;><span id="esh">赛迪网--电脑应用</span></A>
</body> |
三、 警告式链接
当你将鼠标放到链接文本时，会出现一个警告框，可以利用这个功能来设置出一些欢迎词。
代码如下：
<SCRIPT>
// JavaScript Form Validation Demo
// by Paul Colton</SCRIPT>
<p><FONT SIZE=+2><A HREF=" http://www.ccidnet.com/school/ " onMouseOver="alert("现在是休息时间，但还是先看看再下线^O^")"> 赛迪网--电脑应用</A></FONT></body> |
四、 向上移动的文字链接
当你的鼠标放上去时，文章会停留，这样的效果在赛迪网中经常出现！
代码如下：
|
<table border=1 bordercolor=#FFFFFF cellpadding=0 cellspacing=0
width=195 bordercolordark="#FFFFFF">
<tr>
<td height=15 align="center">
<table align=center bgcolor=#ffffff border=1
bordercolordark=#ffffff bordercolorlight=#006666 cellpadding=0
cellspacing=0 width="237" bordercolor="#FFFFFF">
<tbody>
<tr>
<td height="11" align="center" width="233">
<script language=JavaScript>
var index = 10
link = new Array(9);
text = new Array(3);
link[0] =" http://www.ccidnet.com/"
link[1] ="http://www.ccidnet.com/school/"
link[2] ="http://www.ccidnet.com/soft/"
（在这里中你还可以自己添加一些内容，方法是一样的！）
text[0] ="赛迪网"
text[1] ="电脑应用"
text[2] ="软件特供"
document.write ("<marquee scrollamount="1" scrolldelay="60" direction= "up" width="188" id=xiaoqing height="120" onmouseover=xiaoqing.stop() onmouseout=xiaoqing.start()>");
for (i=0;i<index;i++){
document.write ("<a href="+link[i]+" target="_blank"><font color=#003399>");
document.write (text[i] + "</font></A><br>");
}
document.write ("</marquee>")
</script>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr align=middle> |
五、 随机链接地址
应用这个功能来设计链接地址时，主页就可以随机出现。
代码如下：
|
<SCRIPT LANGUAGE="JavaScript">
p = new Array(14);
t = new Array(14);
p[0] = "http://www.ccidnet.com/"
p[1] = "http://www.ccidnet.com/school/"
p[2] = "http://www.ccidnet.com/soft/"
p[3] = "请填入对应站点四的链接"
p[4] = "请填入对应站点五的链接"
p[5] = "请填入对应站点六的链接"
t[0] = "赛迪网"
t[1] = "电脑应用"
t[2] = "软件特供"
t[3] = "站点四"
t[4] = "站点五"
t[5] = "站点六"
index = Math.floor(Math.random() * p.length);document.write("<H4>");
document.write("<DL>
");
document.write("这次的链接地址为:");
document.write("<BR><UL>");
document.write("<A HREF="+p[index]+">"+p[index]+"</A>");
document.write("</UL><P>");
document.write("这个站点的名称是:");
document.write("<BR><UL><FONT COLOR=RED>");
document.write(t[index]);
document.write("</DL>
");
document.write("</h4>");</SCRIPT></FONT>
</UL></Ul> |
六、 滚屏链接
当你的滚动栏移动到某个位置时，链接也跟着移动，就跟滚动图片效果一样！
代码如下：
<script language="javascript">
<!--
function stat(){
var a = pageYOffset+window.innerHeight-document.bar.document.height-15
document.bar.top = a
setTimeout("stat()",2)
}
function fix(){
nome=navigator.appName
if(nome=="Netscape"){
stat()
}
else{
var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight+15
bar.style.top = a
}}
//-->
</script>
<!--第二步：再将以下代码放在<BODY>区：-->
<body onLoad="fix()" onScroll="fix()" onResize="fix()">
<span id="bar" style="position:absolute; left:68px; top:455px; width:614px; height:45px; z-index:9" >
<table border="1" hspace="1" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF">
<tr align="center">
<td width="190"> <a href="http://www.ccidnet.com/">赛迪网</a></td>
<td width="147"> <a href="http://www.ccidnet.com/school/">电脑应用</a></td>
<td width="96"> <a href="http://www.ccidnet.com/soft/">软件特供</a></td>
<td width="158"> <a href="school@staff.ccidnet.com" >给写信</a>
</td>
</tr>
</table>
</span> |
七、 梦幻链接色彩
当鼠标单击链接文本时，链接文本会变色！
代码如下：
|
<!-- Begin
function doColor(item, color, bg) {
item.style.color = color; // changes text color
item.style.backgroundColor = bg; // changes background
}
function undoColor(item) {
item.style.color = "#000000"; // sets color back to black
item.style.backgroundColor = ""; // sets background to default
}
// End -->
</script>
</HEAD>
<!--第二步:在<body>区中加入如下代码-->
<a name="link1" href="http:// www.ccidnet.com/" onmouseover="doColor(link1, "yellow","black");" onmouseout="undoColor(link1);"> 赛迪网</a>
<p>
<a name="link2" href="http://www.ccidnet.com/school/ /" onmouseover="doColor(link2, "blue","red");" onmouseout="undoColor(link2);">电脑应用！</a> |
八、 确认链接
这个特效功能是当你单击链接地址时，弹出问你是否要进入的提示框！
代码如下：
<script>
function winconfirm()
{question = confirm("确实要进入吗?")
if (question != "0"){
window.open("http://www.ccidnet.com/school/", "NewWin", "status=yes, height=200, width=200")}}</script>
<a href="http:// www.ccidnet.com/" onClick="winconfirm(); return false;"><p>赛迪网</a></p></body> |
|
版权所有 四通利方 新浪网