使用JavaScript实现链接文字翻滚特效_文本链接

使用JavaScript实现链接文字翻滚特效: 发布时间：2020-04-15编辑：脚本学堂

使用JavaScript实现链接文字翻滚特效，可以用来制作动态导航菜单和文章列表。翻滚吧，阿信，超有感觉的文字特效。

<!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; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>: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/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>"> 
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 鼠标经过翻滚显示的字体颜色
* 注：<a href=http://www.jb200.com/zt/yansezhi/ target=_blank class=infotextkey>颜色值</a>要写全（如#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>
    </ul>
</div>
<br />
<br />
<br />
<br />
<br />
<div class="box">
<ul>
        <li><a href="#">·<a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>学习网，专业的脚本资源、网站编程、网页特效网站。</a></li>
        <li><a href="#">·不要沮丧，要坚强，美好的生活在前面。</a></li>
        <li><a href="#">·第五届中非部长级论坛今日在京开幕。</a></li>
    </ul>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：JavaScript实现文字颜色循环变化
下一篇：jQuery限制文本框中只能输入中文或英文

与使用JavaScript实现链接文字翻滚特效有关的文章

本文标题：使用JavaScript实现链接文字翻滚特效
本页链接：http://www.jb200.com/tx/146.html

浏览排行

栏目分类

热点文章

使用JavaScript实现链接文字翻滚特效