JavaScript 渐变效果页面图片控制

时间:2020-05-12 人气:0

使用该程序能实现很多常见的动画特效，包括大小变换、位置变换、渐显渐隐等等。
程序说明：渐变效果的原理就是利用定时器不断设置值，如果要减速效果就设置一个步长（详细看JavaScript 弹簧效果）。
这里只是把能渐变的属性（透明度、宽、高、left、top）整合在一起，使用相同的渐变级数（Step）使渐变同步，形成多个属性同时渐变的效果。

下面说说有用的地方：
【最终样式】
在JavaScript 图片切割效果的边宽获取中也说到了最终样式，在使用offset获取的数据设置宽度高度的时候，必须先减去最终样式中的边框宽度。
在这里我使用了muxrwc的在FF下实现currentStyle方法，这样在ff和ie都可以从currentStyle获取最终样式了：

复制代码代码如下:

if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}

使用这个获取边框宽度：

复制代码代码如下:

this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }

【宽度或高度优先】
宽度或高度优先其实就是先执行其中一个渐变，在完成后再执行另一个渐变。
渐变程序中在执行完一次渐变之后会返回一个bool值表示是否渐变完成，利用这个可以这样：

复制代码代码如下:

this.SetWidth() && this.SetHeight();

由于&&的特性，当this.SetWidth()返回true时才会去执行this.SetHeight()，这也是不错的技巧。
同时为了同步渐变，另外的渐变使用了两倍的步长：

复制代码代码如下:

this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;

这样就能做出宽度或高度优先的效果了。

【定点渐变】
先说说原理，例如以宽度中点为参照点，可以想象如果宽度减少n，那只要left相对增加n*0.5（即n/2），
那么就可以做出以中点为中心变换的效果（当然要先把变换对象设为相对或绝对定位）。
那这个“0.5”怎么来的呢？有点数理知识应该知道就是渐变对象左边到变换点跟渐变对象总宽度的比
程序里用Width.pos保存这个值，在变换前先计算好变换点的位置：

this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos;
每次变换都根据这个位置和宽度来重新设置left：

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px";

可能有人会说直接在原有left基础上加上变换宽度*Width.pos不是一样吗？
但问题是经过多次的变换计算（到达目标值前会有多次计算）之后得到的值已经不准确了。
因为在变换计算过程中很多小数会被忽略，随着计算次数增多结果的出入也越大，
所以先定好变换位置参照值（_x），这样不论经过多少次计算变换位置都不会走位了。

同理只要设置不同的Width.pos（包括负数和大于1的数）和Height.pos就可以以任意点为中心渐变了。

还有就是程序的设计也花了不少心思，为了提高整合度，做了一个FadeStruct的结构，其中run、start、end、target属性分别是是否渐变、开始值、结束值、目标值。
用了两次的Object.extend来设置默认值，详细可以看程序。

使用说明：

必要的参数只有一个，就是渐变对象，不过只有渐变对象是没有效果的，必须设置其他属性：
Opacity:透明渐变参数
Height:高度渐变参数
Width:宽度渐变参数
Top:Top渐变参数
Left:Left渐变参数
Step:10,//变化率
Time:10,//变化间隔
Mode:"both",//渐变顺序
Show:false,//是否默认打开状态
onFinish:function(){}//完成时执行

其中Opacity、Height、Width、Top、Left比较特别，是FadeStruct结构

例子里实例化这个对象：

复制代码代码如下:

var f = new Fade("idFade", { Show: true,
Opacity: { run: true },
Height: { run: true },
Width: { run: true, pos: .5 },
Top: { run: true, end: 70 }
});

设置run为true就表示开启这个变换，start和end是开始和结束值，pos是Height和Width特有的变换位置属性。

更详细的应用可以看实例。

程序代码：

复制代码代码如下:

<!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 渐变效果__www.qb5200.com</title> 
</head>

<body>

var $ = function (id) { 
    return "string" == typeof id ? document.getElementById(id) : id; 
};

if(!isIE){ 
    HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
        return this.ownerDocument.defaultView.getComputedStyle(this, null); 
    }); 
}

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; 
}

var FadeStruct = function(options){ 
    this.run = false;//是否渐变 
    this.start = 0;//开始值 
    this.end = 0;//结束值 
    this.target = 0;//目标值 
    Object.extend(this, options || {}); 
}

this._obj.style.height = iGet + "px"; 
    //如果有变换点设置 
    if(this.Height.pos){ this._obj.style.top = this._y - this._obj.offsetHeight * this.Height.pos + "px"; } 
    return false; 
}, 
//设置宽度渐变 
SetWidth: function() { 
    var iGet = this.Get(this.Width, this._obj.offsetWidth - this._xBorder()); 
    if(isNaN(iGet)) return true; 
     
    this._obj.style.width = iGet + "px"; 
    if(this.Width.pos){ this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px"; } 
    return false; 
}, 
//设置top渐变 
SetTop: function() { 
    var iGet = this.Get(this.Top, this._obj.offsetTop); 
    if(isNaN(iGet)) return true; 
     
    this._obj.style.top = iGet + "px"; 
    return false; 
}, 
//设置left渐变 
SetLeft: function() { 
    var iGet = this.Get(this.Left, this._obj.offsetLeft); 
    if(isNaN(iGet)) return true; 
     
    this._obj.style.left = iGet + "px"; 
    return false; 
}, 
//设置透明渐变 
SetOpacity: function() { 
    var iGet = this.Get(this.Opacity, this._getOpacity()); 
    if(isNaN(iGet)) return true; 
     
    this._setOpacity(iGet); 
    return false; 
}, 
//获取设置值 
Get: function(o, now){ 
    if(o.run){ 
        var iStep = (o.target - now) / this.Step; 
        if(iStep){         
            this._finish = false; 
            if(Math.abs(iStep) < 1){ iStep = iStep > 0 ? 1 : -1; } 
            return now + iStep; 
        } 
    } 
} 
};

</script>

.Fade{ 
position:absolute; 
top:10px; 
left:50px; 
border:5px solid #000099; 
width:460px; 
height:360px; 
background:#FFFFFF url(/upload/20080915101308910.jpg) left top; 
} 
</style>

var f = new Fade("idFade", { Show: true, 
    Opacity: { run: true }, 
    Height: { run: true }, 
    Width: { run: true, pos: .5 }, 
    Top: { run: true, end: 70 } 
});

$("idBoth").onclick = function(){ 
    f.Mode = "both"; 
    f.Start(); 
}

$("idHeight").onclick = function(){ 
    f.Mode = "Height"; 
    f.Start(); 
}

$("idWidth").onclick = function(){ 
    f.Mode = "Width"; 
    f.Start(); 
}

$("idOpacity").onclick = function(){ 
    if(f.Opacity.run){ 
        f.Opacity.run = false; 
        f._setOpacity(100); 
        this.value = "设置透明"; 
    } else { 
        f.Opacity.run = true; 
        this.value = "取消透明"; 
    } 
}

$("idMin").onclick = function(){ 
    if(f.Height.start){ 
        f.Height.start = f.Width.start = 0; 
        this.value = "设置最小范围"; 
    } else { 
        f.Height.start = f.Width.start = 100; 
        this.value = "取消最小范围"; 
    } 
}

$("idContainer").onclick = function(e){ 
    if(f.Show){ 
        e = Event(e); 
        e.stopPropagation(); 
        var o = $("idFade"), x = o.offsetLeft, y = o.offsetTop; 
        while (o.offsetParent) { o = o.offsetParent; x += o.offsetLeft; y += o.offsetTop; } 
        f.Width.pos = (e.pageX - x) / $("idFade").offsetWidth; 
        f.Height.pos = (e.pageY - y) / $("idFade").offsetHeight; 
         
    } 
    f.Start(); 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容