`
xinlingwuyu
  • 浏览: 138311 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript渐变效果

JavaScriptF#XHTMLCSSprototype 
阅读更多

<!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>无标题文档</title>

</head>

<body>

<style type="text/css">
#idContainer{height:410px; width:510px; border:1px solid #000000; position:relative;}

.Fade{
position:absolute;
top:20px;
left:20px;
background:#fff;
border:5px solid #000099;
width:460px;
height:360px;
}
</style>

<script type="text/javascript">
var isIE = (document.all) ? true : false;

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

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._opacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; } ;
 
 this._targetH = 0;//目标高度
 this._targetW = 0;//目标宽度
 this._targetO = 0;//目标透明度
 
 var _style = obj.currentStyle || document.defaultView.getComputedStyle(obj, null);
 this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
 this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
 
 this.SetOptions(options);
 
 this.Mode = this.options.Mode;
 this.Step = Math.abs(this.options.Step);
 this.Time = Math.abs(this.options.Time);
 
 this.FadeOpacity = !!this.options.FadeOpacity;
 this.minOpacity = parseInt(this.options.minOpacity);
 this.maxOpacity = parseInt(this.options.maxOpacity);
 
 this.FadeHeight = !!this.options.FadeHeight;
 this.minHeight = parseInt(this.options.minHeight);
 this.maxHeight = parseInt(this.options.maxHeight) || this._obj.offsetHeight - this._yBorder;
 this.posHeight = Math.abs(this.options.posHeight);
 
 this.FadeWidth = !!this.options.FadeWidth;
 this.minWidth = parseInt(this.options.minWidth);
 this.maxWidth = parseInt(this.options.maxWidth) || this._obj.offsetWidth - this._xBorder;
 this.posWidth = Math.abs(this.options.posWidth);
 
 this.Show = !!this.options.Show;
 this.Opacity = 100;//透明度 
 //如果默认是关闭
 if(!this.Show){ this.Opacity = 0; }
  },
  //设置默认属性
  SetOptions: function(options) {
 this.options = {//默认值
  Step:10,//变化率
  Time:10,//变化间隔
  FadeOpacity:true,//是否透明渐变
  minOpacity:0,//最小透明度
  maxOpacity:100,//最大透明度
  FadeHeight:true,//是否高度渐变
  minHeight:0,//最小高度
  maxHeight:0,//最大高度
  posHeight:0,//变换高度位置
  FadeWidth:true,//是否宽度渐变
  minWidth:0,//最小宽度
  maxWidth:0,//最大宽度
  posWidth:0,//变换宽度位置
  Mode:"both",//渐变顺序
  Show:true//是否默认打开状态
 };
 Object.extend(this.options, options || {});
  },
  //触发
  Start: function() {
 clearTimeout(this._timer);
 //取反表示要设置的状态
 this.Show = !this.Show;
 //根据状态设置目标值
 if(this.Show){
  this._targetH = this.maxHeight;
  this._targetW = this.maxWidth;
  this._targetO = this.maxOpacity;
 } else{
  this._targetH = this.minHeight;
  this._targetW = this.minWidth;
  this._targetO = this.minOpacity;
 }
 //设置渐变程序
 switch (this.Mode.toLowerCase()) {
  case "width" :
   this._fun = function(){
    this.SetWidth() && this.SetHeight();
    //由于分了两步，透明度的步长变成两倍
    this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2;
   }
   break;
  case "height" :
   this._fun = function(){
    this.SetHeight() && this.SetWidth();
    this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2;
   }
   break;
  case "both" :
  default :
   this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); }
 }
 //获取变换点位置
 if(this.posHeight){ this._y= this._obj.offsetTop + this._obj.offsetHeight * this.posHeight; }
 if(this.posWidth){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.posWidth; }
 
 this.Run();
  },
  //执行
  Run: function() {
 clearTimeout(this._timer);
 this._finish = true;
 //执行渐变
 this._fun();
 //未完成继续执行
 if (!this._finish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); }
  },
  //设置高度渐变
  SetHeight: function() {
 if(this.FadeHeight){
  var iHeight = this._obj.offsetHeight - this._yBorder, iStep = this.GetStep(this._targetH, iHeight);
  if(iStep){
   //如果有变换点设置
   if(this.posHeight){ this._obj.style.top = this._y - this._obj.offsetHeight * this.posHeight + "px"; }
   this._obj.style.height = (iHeight + iStep) + "px";
   this._finish = false;
   return false;
  }
 }
 return true;
  },
  //设置宽度渐变
  SetWidth: function() {
 if(this.FadeWidth){
  var iWidth = this._obj.offsetWidth - this._xBorder, iStep = this.GetStep(this._targetW, iWidth);
  if(iStep){
   //如果有变换点设置
   if(this.posWidth){ this._obj.style.left = this._x - this._obj.offsetWidth * this.posWidth + "px"; }
   this._obj.style.width = (iWidth + iStep) + "px";
   this._finish = false;
   return false;
  }
 }
 return true;
  },
  //设置透明渐变
  SetOpacity: function() {
 if(this.FadeOpacity){
  var iStep = this.GetStep(this._targetO, this.Opacity);
  if(iStep){
   this.Opacity += iStep;
   //防止透明度出错
   if(this.Opacity < 0){ this.Opacity = 0; } else if(this.Opacity > 100){ this.Opacity = 100; }
   this._opacity(this.Opacity);
   this._finish = false;
   return false;
  }
 } else{ this._opacity(100); }
 return true;
  },
  //获取步长
  GetStep: function(iTarget, iNow) {
 var iStep = (iTarget - iNow) / this.Step;
 if (iStep == 0) return 0;
 if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
 return iStep;
  }
};

</script>


<input id="idBoth" type="button" value="同时伸缩" />

<input id="idMid" type="button" value="居中伸缩" />

<input id="idHeight" type="button" value="高度优先" />

<input id="idWidth" type="button" value="宽度优先" />

<div id="idContainer">
<div id="idFade" class="Fade"></div>
</div>

<input id="idOpacity" type="button" value="取消透明" />

<input id="idMin" type="button" value="设置最小范围" />

<input id="idWidthF" type="button" value="取消宽度变换" />

<input id="idHeightF" type="button" value="取消高度变换" />

<script type="text/javascript">
var f = new Fade("idFade");

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

$("idMid").onclick = function(){
 f.posWidth = f.posHeight = .5;
 f.Start();
}

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

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

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

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

$("idWidthF").onclick = function(){
 if(!f.FadeWidth){
  f.FadeWidth = true;
  this.value = "取消宽度变换";
 } else {
  f.FadeWidth = false;
  this.value = "设置宽度变换";
 }
}

$("idHeightF").onclick = function(){
 if(!f.FadeHeight){
  f.FadeHeight = true;
  this.value = "取消高度变换";
 } else {
  f.FadeHeight = false;
  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;
}

$("idFade").onclick = function(e){
 if(f.Show){
  e = Event(e);
  e.stopPropagation();
  var o=this, x=o.offsetLeft, y=o.offsetTop;
  while (o.offsetParent) { o = o.offsetParent; x += o.offsetLeft; y += o.offsetTop; }
  f.posWidth = (e.pageX - x) / this.offsetWidth;
  f.posHeight = (e.pageY - y) / this.offsetHeight;
  f.Start();
 }
}

$("idContainer").onclick = function(e){
 if(!f.Show){ f.Start(); }
}
</script>

 

<div id="aa"></div>
</body>
</html>

分享到：
| QQ窗口震动效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript渐变效果

    深入理解JavaScript渐变效果，可以查阅MDN Web文档、W3School等权威资料，也可以观看在线教程视频，如CodePen上的示例代码和讲解。 通过以上知识点的学习和实践，你将能够运用JavaScript创建出各种生动有趣的渐变...

    JavaScript 渐变效果页面图片控制第1/2页

    ### JavaScript 渐变效果页面图片控制知识点梳理 #### 一、JavaScript 渐变效果概念 JavaScript 渐变效果是指利用JavaScript脚本来实现对象属性（如元素的宽度、高度、透明度、位置等）在一段时间内平滑变化的效果...

    JavaScript 图片渐变效果实例

    在本实例中，我们关注的是使用JavaScript实现图片渐变效果。这种效果通常用于提升用户体验，比如平滑地改变图片的颜色或者透明度，使得页面更具视觉吸引力。 在JavaScript中，实现图片渐变效果主要有以下几种方法：...

    JavaScript 颜色梯度和渐变效果

    JavaScript颜色梯度和渐变效果是网页设计中常用的技术，用于创建美观且动态的视觉体验。在网页上，颜色梯度和渐变可以为背景、按钮、边框等元素增添深度和动感，使得用户界面更加吸引人。本文将深入探讨JavaScript...

    Jquery图片渐变效果

    在网页设计中，jQuery 图片渐变效果是一种增强用户体验的常见技术。这种效果可以使图片在加载或切换时平滑地过渡，为用户带来更流畅、更动态的视觉体验。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、...

    javascript html js 渐变效果,图片渐变,图片渐渐变小,变没

    标题中的“javascript html js 渐变效果”是指在网页中使用JavaScript、HTML和CSS来实现动态的视觉效果，特别是图像的渐变变化。这通常包括颜色渐变、大小渐变或者透明度渐变，用于创建平滑过渡或动画效果，增强用户...

    图片渐变效果

    在IT行业中，图片渐变效果通常是指通过编程技术在图像之间创建平滑过渡的效果，这种效果常见于网页设计、用户界面以及动态图形中。在HTML5中，实现图片渐变有多种方法，包括CSS3的渐变效果、canvas画布以及WebGL等...

    JavaScript 渐变链接提示tooltip封装类

    下面我们将详细探讨这个JavaScript渐变链接提示类的设计、实现及其相关的知识点。 1. **渐变效果**：渐变在现代网页设计中是非常常见的一种视觉表现形式，它可以是颜色的平滑过渡，也可以是透明度的变化。在...

    javascript经典特效---图片渐变效果.rar

    在JavaScript的世界里，图片渐变效果是一种常见的视觉特效，它能为网页增添动态美感和交互体验。本教程将深入探讨如何使用JavaScript实现图片的渐变显示效果，让你的网页更加生动有趣。 首先，我们需要理解“渐变”...

    漂亮鼠标经过渐变效果

    总的来说，"漂亮鼠标经过渐变效果"是一种利用CSS3渐变和过渡属性，或者JavaScript技术增强网页交互性的设计手法。它不仅可以提升网站的视觉吸引力，还能提供更直观的用户反馈，使用户在浏览过程中感到更加舒适和愉快...

    幻灯片图片渐变效果网页特效

    综上所述，"幻灯片图片渐变效果"是现代网页设计中提升用户体验的重要工具，通过CSS3、JavaScript库、HTML5新特性等技术手段，我们可以创造出丰富多样的渐变效果。在实践中，应根据项目需求和用户群体选择最适合的...

    Javascript 颜色渐变效果的实现代码

    本篇文档提供了实现颜色渐变效果的详细思路和代码实例，特别是利用JavaScript和RGB颜色模型来完成。 首先，介绍颜色渐变效果的实现思路。颜色渐变通常意味着一个颜色平滑过渡到另一个颜色，这在用户界面设计中能...

    css3文字模糊渐变效果zip

    通过查看和分析这些文件，我们可以学习到如何将静态的CSS3样式与动态的JavaScript动画结合起来，创建出更具视觉冲击力的文本模糊渐变效果。这在网页设计中是一个实用的技巧，可以提升用户体验，让网站或应用更加吸引...

    Js实现图片渐变效果.rar

    在JavaScript中实现图片渐变效果是一项常见的前端技术，它可以为网页增添动态视觉效果，提高用户体验。这个"Js实现图片渐变效果.rar"压缩包可能包含一个或多个代码示例，帮助初学者理解如何通过JavaScript来操作图像...

    Canvas渐变时间效果

    在这个项目中，我们将结合JavaScript的Date对象和Canvas API，实现一个实时刷新系统时间并展示在画布上的渐变效果。 首先，我们需要在HTML文档中创建一个Canvas元素。在`&lt;body&gt;`标签内添加以下代码： ```html ...

    图片渐变轮播 css+javascript

    3. **渐变效果**：通过CSS渐变（`linear-gradient`或`radial-gradient`）为图片的显示和隐藏添加视觉上的过渡效果，使得图片在切换时不是突然出现或消失，而是逐渐显现或淡出。 接下来，JavaScript是实现动态交互的...

    js渐变图标效果广告代码

    渐变效果在设计中是一种流行的技术，它可以是线性的，也可以是径向的，通过平滑地过渡颜色来创建出丰富多彩的视觉体验。在JavaScript中，可以使用CSS3 API或者直接操作DOM元素的样式属性来实现这一效果。例如，利用...

    jQuery滚动相册实现代码带渐变效果

    本篇文章将深入探讨如何利用JavaScript库jQuery以及CSS技术来创建一个带有渐变效果的滚动相册。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作和...

Magicbox
Global site tag (gtag.js) - Google Analytics