怎样让文字由淡到深逐渐显示出来

babycry627 2009-06-17 02:15:52

如题怎么样让文字由淡到深逐渐显示出来啊
我用的一个<div>和一个<a>标签
当点击<a>标签的时候这个<div>就显示出来
但是怎么样让他它有淡逐渐清晰显示出来啊

...全文

345 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

babycry627 2009-06-22

打赏
举报

谢谢大家已经解决

长明 2009-06-20

打赏
举报



<div id="hDiv" style="display:none">隐藏层</div>

<a id="show">显示隐藏层</a>

<script>

jQuery(document).ready(function(){

      $("#show").click(function(){$("#hDiv").fadeIn("slow")})



}

})

</script>

babycry627 2009-06-20

打赏
举报

jquery刚听说的啊现在就需要用这个功能啊
哪位高手能帮忙哪写出来下吗
4楼的按个是可以放在一般的页面可以我这全是<div>层的放进去把页面的顺序打乱了啊我在次点击那个连接的时候它不能消失

ljyangel 2009-06-19

打赏
举报

jquery

bing475879749 2009-06-19

打赏
举报

<a href="javascript:;" onclick="change()">点我就慢慢的变</a>

<div id="str" style="width:200px; height:50px; background:#F00;">土土土fffffffffffff</div>

<script type="text/javascript">

var f=0,o=0;  //定义透明度f是兼容IE，O是兼容FF

var arm=document.getElementById("str").style;//获取对象

arm.filter="alpha(opacity="+f+")";//初始化对象透明度为0

arm.opacity=o;//兼容FF

function change(){

f+=1;//函数每调用一次1

o+=0.01;

arm.filter="alpha(opacity="+f+")";

arm.opacity=o;

window.setTimeout("change()",1);  //定时器

}

</script>

lzj34 2009-06-19

打赏
举报

建议学习一下jquery

newdomer 2009-06-19

打赏
举报

强烈建议学习一下jquery,看完后就会非常简单.

lihan6415151528 2009-06-17

打赏
举报

参考这个！



<!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=gb2312" />

<title>Javascript 文字颜色渐变效果</title>

<script type="text/javascript">

var $ = function (id) {

    return "string" == typeof id ? document.getElementById(id) : id;

};



var Class = {

create: function() {

    return function() {

      this.initialize.apply(this, arguments);

    }

}

}



Object.extend = function(destination, source) {

    for (var property in source) {

        destination[property] = source[property];

    }

    return destination;

}



function addEventHandler(oTarget, sEventType, fnHandler) {

    if (oTarget.addEventListener) {

        oTarget.addEventListener(sEventType, fnHandler, false);

    } else if (oTarget.attachEvent) {

        oTarget.attachEvent("on" + sEventType, fnHandler);

    } else {

        oTarget["on" + sEventType] = fnHandler;

    }

};



var ColorFade = Class.create();

ColorFade.prototype = {

initialize: function(Obj, options) {

    var obj = $(Obj), oThis = this;

    this.obj = obj;

    

    this.SetOptions(options);

    obj.style.color = this.options.startColor;



    var startColor = this.GetColor(this.options.startColor), endColor = this.GetColor(this.options.endColor);



    this.startColor = this.color = startColor;

    this.endColor = endColor;

    this.timer = null;

    this.arrStep = [this.GetStep(startColor[0], endColor[0]), this.GetStep(startColor[1], endColor[1]), this.GetStep(startColor[2], endColor[2])];

    

    addEventHandler(obj, "mouseover", function(){ oThis.MouseOver() });

    addEventHandler(obj, "mouseout", function(){ oThis.MouseOut() });

},

//设置默认属性

SetOptions: function(options) {

    this.options = {//默认值

      startColor:    "#671700",//定义原来的颜色

      endColor:        "#D8D1C5",//定义要渐变的颜色

      Step:            20,//渐变级数

      speed:        10//渐变速度

    };

    Object.extend(this.options, options || {});

},

//颜色渐变

Fade: function(rColor) {

    var er = rColor[0], eg = rColor[1], eb = rColor[2], iStep = this.arrStep, color = this.color;



    r = this.GetRGB(color[0], er, iStep[0]); g = this.GetRGB(color[1], eg, iStep[1]); b = this.GetRGB(color[2], eb, iStep[2]);

    

    if (r==er && g==eg && b==eb) return;

    

    this.SetColor(r, g, b);

    

    var oThis = this;

    this.timer = setTimeout(function(){ oThis.Fade(rColor); }, this.options.speed);

},

//获取颜色数据    

GetColor: function(sColor) {

    var r, g, b

    sColor = sColor.replace("#", "");

    if (sColor.length > 3) {

        r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);

    } else {

        r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1); r += r; g += g; b += b;

    }

    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];

},

//设置颜色

SetColor: function(r, g, b) {

    this.color = [r, g, b]; this.obj.style.color = "#" + Hex(r) + Hex(g) + Hex(b);

}, 

//onmouseover事件

MouseOver: function() {

    clearTimeout(this.timer); this.Fade(this.endColor);

},

//onmouseout事件

MouseOut: function() {

    clearTimeout(this.timer); this.Fade(this.startColor);

},

//获取渐变颜色数据

GetRGB: function(c, ec, iStep) {

    if (c == ec) { return c; }

    if (c < ec) { c += iStep; return (c > ec ? ec : c); }

    else { c -= iStep; return (c < ec ? ec : c); }

},

//获取渐变级数

GetStep: function(start, end) {

    var iStep = Math.ceil((end - start)/this.options.Step);

    return (iStep >= 1 ? iStep : 1);

}

};



//返回16进制数

function Hex(i) {

    if (i < 0) return "00";

    else if (i > 255) return "ff";

    else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }

}



//仿asp的mid 截字

function Mid(string, start, length) {

    if (length) return string.substring(start, start + length);

    else return string.substring(start);

}

</script>

</head>



<body>

<a href="http://shundebk.cn/" id="idLink">颜色渐变效果</a>

<br /><br />

<div id="idDiv">颜色渐变效果</div>

<script>

new ColorFade("idLink");

new ColorFade("idDiv", { startColor: "#f30", endColor: "#134" });

</script>

</body>

</html>