***链接特效***有没有看过会旋转的链接? 请看...... (爽啊。)
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要两个步骤
第一步:把如下代码加入到<head>区域中
<style>
.fly {
color: 336c6c;
font-family: arial;
font-size: 24px;
position: absolute;
visibility: hidden;
z-index: 2;
}
.logo {
font-family: times;
font-size: 48px;
color: blue;
position: absolute;
top: 0px;
left: 70px;
visibility: visible;
z-index: 1;
}
.desc {
text-align: center;
font-family: 楷体_gb2312;
font-size: 18px;
color: #336c6c;
position: absolute;
top: 220px;
left: 140px;
width: 400px;
visibility: hidden;
z-index: 0;
}
body {
background: #c0c0c0;
}
a {
color: lime;
}
a:hover {
color : yellow;
}
</style>
<script language="javascript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function showobject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideobject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
function slidelogo(from, to) {
if (from < to) {
company.top = (from += 10);
settimeout('slidelogo(' + from + ',' + to + ')', 20);
}
else initobjects();
}
function rotateobjects() {
for (var i = 0; i < pos.length; i++) {
pos += inc; objects.visibility = 'visible';
objects.left = (r * math.cos(pos)) + xoff
objects.top = (r * math.sin(pos)) + yoff;
}
rotatetimer = settimeout("rotateobjects()", 50);
}
function initobjects() {
objects = new array(fly1, fly2, fly3, fly4);
pos = new array();
pos = 0;
for (var i = 1; i < objects.length; i++) {
pos = parsefloat(pos + ((2 * pi) / objects.length));
}
rotateobjects();
}
/* variables for rotating objects */
var objects;
var pos;
var r = 160; // radius
var xoff = 280; // x offset
var yoff = 170; // y offset
var pi = math.pi; // get pi
var inc = pi / 180; // degrees per rotation cycle
var objects; // objects to be rotated
var pos; // position for objects
</script>
第二步:把如下代码加入到<body>区域中
<div id="fly1" class="fly"><p>
<a href="#" onmouseover="showobject(desc1)"
onmouseout="hideobject(desc1)">link 1</a><br>
</p>
</div><div id="fly2" class="fly"><p>
<a href="#" onmouseover="showobject(desc2)"
onmouseout="hideobject(desc2)">link 2</a><br>
</p>
</div><div id="fly3" class="fly"><p>
<a href="#" onmouseover="showobject(desc3)"
onmouseout="hideobject(desc3)">link 3</a><br>
</p>
</div><div id="fly4" class="fly"><p>
<a href="#" onmouseover="showobject(desc4)"
onmouseout="hideobject(desc4)">link 4</a><br>
</p>
</div><div id="company" class="logo">
<p><small>welcome to typhoon start</small></p>
</div><div id="desc1" class="desc">
<p>link 1的内容 </p>
</div><div id="desc2" class="desc">
<p>link 2的内容 </p>
</div><div id="desc3" class="desc">
<p>link 3的内容 </p>
</div><div id="desc4" class="desc">
<p>link 4的内容 </p>
</div><script language="javascript">
/* simple version detection */
var isns = (navigator.appname == "netscape" && parseint(navigator.appversion) >= 4);
/* they can be used in place
of hidden and visible because on occasion navigator has problems with the two */
var hidden = (isns) ? 'hide' : 'hidden';
var visible = (isns) ? 'show' : 'visible';
/* create shortcut variables for different absolutely positioned elements */
var fly1 = (isns) ? document.fly1 : document.all.fly1.style;
var fly2 = (isns) ? document.fly2 : document.all.fly2.style;
var fly3 = (isns) ? document.fly3 : document.all.fly3.style;
var fly4 = (isns) ? document.fly4 : document.all.fly4.style;
var company = (isns) ? document.company : document.all.company.style;
var desc1 = (isns) ? document.desc1 : document.all.desc1.style;
var desc2 = (isns) ? document.desc2 : document.all.desc2.style;
var desc3 = (isns) ? document.desc3 : document.all.desc3.style;
var desc4 = (isns) ? document.desc4 : document.all.desc4.style;
/* begin the sliding of the company logo */
slidelogo(0, 140);
</script>
------------------------------- ----- --
拥有三人 行论坛管理系列软件,一个人就可以管理一个论坛的更 新维护。 还能使您的论坛有 千人在线的真实火暴效 果,让您不在为论坛因没有人气而留不住 会员而烦恼,使您的论坛早日成为一 流的论坛。详情请登陆网站:http://www.cnsrx.cn 三人行论坛管理软件,站长必备的专业好工具。(您使用的 是免费版本,购买收费版本后, 将不带广告 。业务QQ:2 47216 44985227)
页:
[1]