 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 链接翻滚的文字特效 |
| 来源：源码爱好者 更新时间：2011/12/25 12:39:02 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接样式翻滚吧</title>
<style type="text/css">
.box li{ list-style:none; height:20px; margin-top:4px; line-height:20px; font-size:12px;}
.menuBox li{ list-style:none; height:20px; margin-top:4px; width:60px; float:left; margin-right:10px; line-height:20px; font-size:12px;}
</style>
<script type="text/javascript">
var RollText = function(cName,color1,color2){this.initialize(cName,color1,color2);}
RollText.prototype = {
initialize:function(cName,color1,color2){
var self = this;
var obj = self.getClass(document.body,cName);
for(var i=0;i<obj[0].getElementsByTagName("li").length;i++){
var li = obj[0].getElementsByTagName("li")[i];
li.style.position = "relative";
li.style.overflow = "hidden";
var text = li.getElementsByTagName("a")[0];
text.style.position = "absolute";
text.style.textDecoration = "none";
text.innerHTML = "<font color="+color1+">" + text.innerHTML + "</font><br /><font color="+color2+">" + text.innerHTML + "</font>";
text.onmouseover = function(){
self.startMove(this,{"marginTop":-li.offsetHeight});
}
text.onmouseout = function(){
self.startMove(this,{"marginTop":0});
}
}
},
getClass : function(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
},
startMove : function(target, object, onComplete){
var self = this;
if(target.timer)clearInterval(target.timer);
target.timer = setInterval(function (){
self.doMove(target, object, onComplete);
}, 30);
},
doMove : function(target, object, onComplete){
var iCur = 0;
var attr = '';
var bStop = true;
var self = this;
for(attr in object){
attr == 'opacity' ? iCur = parseInt(parseFloat(self.getStyle(target, 'opacity'))*100) : iCur = parseInt(self.getStyle(target, attr));
if(isNaN(iCur))iCur = 0;
if(navigator.userAgent.indexOf("Firefox") > 0){
var iSpeed = (object[attr]-iCur) / 3;
}else{
var iSpeed = (object[attr]-iCur) / 3;
}
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(parseInt(object[attr])!=iCur)bStop = false;
if(attr=='opacity'){
target.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
target.style.opacity = (iCur + iSpeed) / 100;
}else{
attr == 'zIndex' ? target.style[attr] = iCur + iSpeed : target.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop){
clearInterval(target.timer);
target.timer = null;
if(onComplete)onComplete();
}
},
getStyle : function(target, attr){
return target.currentStyle?target.currentStyle[attr]:getComputedStyle(target, false)[attr];
}
}
/**
* 用法如下
* @method RollText(cName,color1,color2);
* @param cName 要运用到的class
* @param color1 默认时文字颜色
* @param color1 鼠标经过翻滚显示的字体颜色
* 注：颜色值要写全（如#000000）否则IE那贱货不显示你设置的颜色
*/
window.onload = function(){
//新闻列表展示
var roll = new RollText("box","#000000","#ff0000");
//网站菜单展示
var rollMenu = new RollText("menuBox","#000000","#CC6000");
}
</script>
</head>
<body>
<div class="menuBox">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<div class="box">
<ul>
<li><a href="#">·红十字总会今年财务收入近6亿</a></li>
<li><a href="#">·中国南极科考队直升机失事 2名机组</a></li>
<li><a href="#">·今年255人因食品安全案获刑 李克强要</a></li>
<li><a href="#">·北京地税局证实年终奖多1元或多缴千元个税</a></li>
<li><a href="#">·欧央行两个月内再次降息 宣布多项措施拯救欧洲</a></li>
<li><a href="#">·时代周刊公布年度全球十大新闻：阿拉伯之春居首</a></li>
<li><a href="#">·伊朗军方通过电视台播出击落美国无人机画面</a></li>
<li><a href="#">·王晨会见ICANN总裁 政务微博：力行"织博为民"</a></li>
<li><a href="#">·第五届中美互联网论坛举行 钱小芊发表演讲(图)</a></li>
<li><a href="#">·高官全部落选工程院院士 个别单位领导曾拉票</a></li>
<li><a href="#">·住建部官员：PM2.5指数升高与建造玻璃幕墙有关</a></li>
</ul>
</div>
</body>
</html> |
| 特效说明： |
让链接翻滚的一种文字链接特效，基于JavaScript和CSS实现，注：颜色值要写全(如#000000)否则IE那贱货不显示你设置的颜色，推荐给大家。 |
|
| 上一篇文章： 鼠标跟随效果的链接文字提示下一篇文章： 鼠标移入/移出颜色渐变 |
|
|
|
注册 登录
