今天是

爱酷家


当前位置:首页 > 资源收藏 > 特效代码

链接样式翻滚吧

收集整理   发布时间:2013-05-05 21:42:00   阅读

链接样式翻滚吧

效果在FLASH里面很常见。
兼容性:应该支持各类浏览器
写法形式:封装形式
代码:原生

应该蛮实用的 。所以和大家分享 共同学习。

解释下类的用法吧

代码:
/**
* 用法如下
* @method        Astyle(cName,seat);
* @param        cName 要运用到的class
* @param        seat 线的位子有效参数("top","center","bottom")
*/
window.onload = function(){
        var astyle = new Astyle("ButtonStyle","bottom");
        var astyle2 = new Astyle("ButtonStyle2","center");
        var astyle3 = new Astyle("ButtonStyle3","top");
        
        var asyleMenu = new Astyle("menu","bottom");
}
通过“构造”函数参数设置 字体默认与划过的颜色。

演示代码:

代码:
<!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>



注:⊙如转载本站原创作品,请务必包保留本文地址:

内容: