原帖
http://bbs.blueidea.com/thread-2883702-1-2.html
实例和程序说明看这里
http://www.cnblogs.com/cloudgamer/archive/2008/08/27/1277131.html
JavaScript 弹簧效果
渐变效果的原理就是利用定时器不断设置值，如果要减速效果就设置一个步长（详细看JavaScript 弹簧效果）
http://www.cnblogs.com/cloudgamer/archive/2008/05/17/1201386.html
<!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>
</head>
<body>
<script type="text/javascript">
var isIE = (document.all) ? true : false;
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 || {});
}
var Fade = Class.create();
Fade.prototype = {
initialize: function(obj, options) {
var obj = $(obj);
obj.style.overflow = "hidden";
this._obj = obj;
this._timer = null;//定时器
this._finish = true;//是否执行完成
this._fun = function(){};//渐变程序
this._x = this._y = 0;//变换点位置
//设置获取透明度程序
this._setOpacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; };
this._getOpacity = isIE ? function(){ return parseInt(obj.filters["alpha"].opacity); } : function(opacity){ return 100 * parseFloat(obj.currentStyle.opacity); };
//获取边框宽度程序
this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }
this.SetOptions(options);
this.Mode = this.options.Mode;
this.Time = Math.abs(this.options.Time);
this.onFinish = this.options.onFinish;
//先设置特殊默认值
this.Opacity = new FadeStruct({ end: 100 });
this.Top = new FadeStruct({ start: this._obj.offsetTop, end: this._obj.offsetTop });
this.Left = new FadeStruct({ start: this._obj.offsetLeft, end: this._obj.offsetLeft });
this.Height = new FadeStruct({ end: this._obj.offsetHeight - this._yBorder() });
this.Width = new FadeStruct({ end: this._obj.offsetWidth - this._xBorder() });
//再设置用户默认值
Object.extend(this.Opacity, this.options.Opacity);
Object.extend(this.Top, this.options.Top);
Object.extend(this.Left, this.options.Left);
Object.extend(this.Height, this.options.Height);
Object.extend(this.Width, this.options.Width);
//变换位置参数
this.Height.pos = Number(this.options.Height.pos);
this.Width.pos = Number(this.options.Width.pos);
//设置成默认状态
this.Show = !this.options.Show;
this.Step = 1;
this.Start();
//重新设置Step
this.Step = Math.abs(this.options.Step);
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Opacity: {},//透明渐变参数
Height: {},//高度渐变参数
Width: {},//宽度渐变参数
Top: {},//Top渐变参数
Left: {},//Left渐变参数
Step: 10,//变化率
Time: 10,//变化间隔
Mode: "both",//渐变顺序
Show: false,//是否默认打开状态
onFinish: function(){}//完成时执行
};
Object.extend(this.options, options || {});
},
//触发
Start: function() {
clearTimeout(this._timer);
//取反表示要设置的状态
this.Show = !this.Show;
//为避免透明度为null值，需要先设置一次透明度
if(this.Opacity.run){ this._setOpacity(this.Show ? this.Opacity.start : this.Opacity.end); }
//根据状态设置目标值
if(this.Show){
this.Opacity.target = this.Opacity.end;
this.Top.target = this.Top.end;
this.Left.target = this.Left.end;
this.Height.target = this.Height.end;
this.Width.target = this.Width.end;
} else{
this.Opacity.target = this.Opacity.start;
this.Top.target = this.Top.start;
this.Left.target = this.Left.start;
this.Height.target = this.Height.start;
this.Width.target = this.Width.start;
}
//设置渐变程序
switch (this.Mode.toLowerCase()) {
case "width" :
this._fun = function(){
this.SetWidth() && this.SetHeight();
//由于分了两步，下面的步长变成两倍
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;
}
break;
case "height" :
this._fun = function(){
this.SetHeight() && this.SetWidth();
//由于分了两步，下面的步长变成两倍
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;
}
break;
case "both" :
default :
this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); this.SetTop(); this.SetLeft();}
}
//获取变换点位置
//由于设置变换点后与top和left变换有冲突只能执行其一
if(this.Height.pos){ this._y = this._obj.offsetTop + this._obj.offsetHeight * this.Height.pos; this.Top.run = false; }
if(this.Width.pos){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos; this.Left.run = false; }
this.Run();
},
//执行
Run: function() {
clearTimeout(this._timer);
this._finish = true;
//执行渐变
this._fun();
//未完成继续执行
if (this._finish) { this.onFinish(); }
else { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); }
},
//设置高度渐变
SetHeight: function() {
var iGet = this.Get(this.Height, this._obj.offsetHeight - this._yBorder());
if(isNaN(iGet)) return true;
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>
<style type="text/css">
.Container{height:450px; width:600px;position:relative; background:#FFFFFF;}
.Fade{
position:absolute;
top:10px;
left:50px;
border:5px solid #000099;
width:460px;
height:360px;
background:#FFFFFF url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg) left top;
}
</style>
<input id="idBoth" type="button" value="同时伸缩" />
<input id="idHeight" type="button" value="高度优先" />
<input id="idWidth" type="button" value="宽度优先" />
<div id="idContainer" class="Container">
<div id="idFade" class="Fade"></div>
</div>
<input id="idOpacity" type="button" value="取消透明" />
<input id="idMin" type="button" value="设置最小范围" />
<script type="text/javascript">
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 = "取消最小范围";
}
}
function Event(e){
var oEvent = isIE ? window.event : e;
if (isIE) {
oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;
oEvent.stopPropagation = function(){ this.cancelBubble = true; };
}
return oEvent;
}
$("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>
分享到：
相关推荐
深入理解JavaScript渐变效果，可以查阅MDN Web文档、W3School等权威资料，也可以观看在线教程视频，如CodePen上的示例代码和讲解。 通过以上知识点的学习和实践，你将能够运用JavaScript创建出各种生动有趣的渐变...
### JavaScript 渐变效果页面图片控制知识点梳理 #### 一、JavaScript 渐变效果概念 JavaScript 渐变效果是指利用JavaScript脚本来实现对象属性（如元素的宽度、高度、透明度、位置等）在一段时间内平滑变化的效果...
在本实例中，我们关注的是使用JavaScript实现图片渐变效果。这种效果通常用于提升用户体验，比如平滑地改变图片的颜色或者透明度，使得页面更具视觉吸引力。 在JavaScript中，实现图片渐变效果主要有以下几种方法：...
JavaScript颜色梯度和渐变效果是网页设计中常用的技术，用于创建美观且动态的视觉体验。在网页上，颜色梯度和渐变可以为背景、按钮、边框等元素增添深度和动感，使得用户界面更加吸引人。本文将深入探讨JavaScript...
在网页设计中，jQuery 图片渐变效果是一种增强用户体验的常见技术。这种效果可以使图片在加载或切换时平滑地过渡，为用户带来更流畅、更动态的视觉体验。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、...
标题中的“javascript html js 渐变效果”是指在网页中使用JavaScript、HTML和CSS来实现动态的视觉效果，特别是图像的渐变变化。这通常包括颜色渐变、大小渐变或者透明度渐变，用于创建平滑过渡或动画效果，增强用户...
在IT行业中，图片渐变效果通常是指通过编程技术在图像之间创建平滑过渡的效果，这种效果常见于网页设计、用户界面以及动态图形中。在HTML5中，实现图片渐变有多种方法，包括CSS3的渐变效果、canvas画布以及WebGL等...
下面我们将详细探讨这个JavaScript渐变链接提示类的设计、实现及其相关的知识点。 1. **渐变效果**：渐变在现代网页设计中是非常常见的一种视觉表现形式，它可以是颜色的平滑过渡，也可以是透明度的变化。在...
在JavaScript的世界里，图片渐变效果是一种常见的视觉特效，它能为网页增添动态美感和交互体验。本教程将深入探讨如何使用JavaScript实现图片的渐变显示效果，让你的网页更加生动有趣。 首先，我们需要理解“渐变”...
总的来说，"漂亮鼠标经过渐变效果"是一种利用CSS3渐变和过渡属性，或者JavaScript技术增强网页交互性的设计手法。它不仅可以提升网站的视觉吸引力，还能提供更直观的用户反馈，使用户在浏览过程中感到更加舒适和愉快...
综上所述，"幻灯片图片渐变效果"是现代网页设计中提升用户体验的重要工具，通过CSS3、JavaScript库、HTML5新特性等技术手段，我们可以创造出丰富多样的渐变效果。在实践中，应根据项目需求和用户群体选择最适合的...
本篇文档提供了实现颜色渐变效果的详细思路和代码实例，特别是利用JavaScript和RGB颜色模型来完成。 首先，介绍颜色渐变效果的实现思路。颜色渐变通常意味着一个颜色平滑过渡到另一个颜色，这在用户界面设计中能...
通过查看和分析这些文件，我们可以学习到如何将静态的CSS3样式与动态的JavaScript动画结合起来，创建出更具视觉冲击力的文本模糊渐变效果。这在网页设计中是一个实用的技巧，可以提升用户体验，让网站或应用更加吸引...
在JavaScript中实现图片渐变效果是一项常见的前端技术，它可以为网页增添动态视觉效果，提高用户体验。这个"Js实现图片渐变效果.rar"压缩包可能包含一个或多个代码示例，帮助初学者理解如何通过JavaScript来操作图像...
在这个项目中，我们将结合JavaScript的Date对象和Canvas API，实现一个实时刷新系统时间并展示在画布上的渐变效果。 首先，我们需要在HTML文档中创建一个Canvas元素。在`<body>`标签内添加以下代码： ```html ...
3. **渐变效果**：通过CSS渐变（`linear-gradient`或`radial-gradient`）为图片的显示和隐藏添加视觉上的过渡效果，使得图片在切换时不是突然出现或消失，而是逐渐显现或淡出。 接下来，JavaScript是实现动态交互的...
渐变效果在设计中是一种流行的技术，它可以是线性的，也可以是径向的，通过平滑地过渡颜色来创建出丰富多彩的视觉体验。在JavaScript中，可以使用CSS3 API或者直接操作DOM元素的样式属性来实现这一效果。例如，利用...
本篇文章将深入探讨如何利用JavaScript库jQuery以及CSS技术来创建一个带有渐变效果的滚动相册。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作和...