域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
链接特效
>> 正文
能移动的超级连接特效(比较酷)
作者:
天诚世纪
更新时间:2009-6-16 10:51:53
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页特效|tc-21.com|---能移动的超级连接特效(比较酷)</title> </head> <body> <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[i] += inc; objects[i].visibility = 'visible'; objects[i].left = (r * Math.cos(pos[i])) + xoff } rotateTimer = setTimeout("rotateObjects()", 50); } function initObjects() { objects = new Array(fly1, fly2, fly3, fly4); pos = new Array(); pos[0] = 0; for (var i = 1; i < objects.length; i++) { pos[i] = parseFloat(pos[i - 1] + ((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 BGCOLOR="#c0c0c0" link="green" TEXT="black"> <div ID="fly1" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc1)" onMouseOut="hideObject(desc1)"> <p>Item 1</a><br></p> </div><div ID="fly2" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc2)" onMouseOut="hideObject(desc2)"> <p>Item 2</a><br></p> </div><div ID="fly3" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc3)" onMouseOut="hideObject(desc3)"> <p>Item 3</a><br></p> </div><div ID="fly4" CLASS="fly"><a HREF="#" onMouseOver="showObject(desc4)" onMouseOut="hideObject(desc4)"> <p>Item 4</a><br></p> </div><div ID="company" CLASS="logo"> <p><small>WELCOME TO DREAM WORKROOM</small></p> </div><div ID="desc1" CLASS="desc"> <p>Item 1的内容 </p> </div><div ID="desc2" CLASS="desc"> <p>Item 2的内容 </p> </div><div ID="desc3" CLASS="desc"> <p>Item 3的内容 </p> </div><div ID="desc4" CLASS="desc"> <p>Item 4的内容 </p> </div><script LANGUAGE="JavaScript"> /* Simple version detection */ var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);/* They can be used in placeof 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> </body> </html>
.
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200906/20090616105153.html
上一篇文章:
超链接陷下效果
下一篇文章:
连续向上滚动的链接信息
更多关于
链接特效
的新闻
相关文章
飘忽不定的图片链接
非常不错的一款连接提示信息显示效果
链接确认效果
连续向上滚动的链接信息
超链接陷下效果
给超链接加两条下划线
定时滚动链接的菜单
鼠标经过时链接文字的特殊显示
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::