很酷的图片伸缩放大功能

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

热点推荐: 英文字体人民币汇率
dw插件站长常用软件
alexa排名查询

您的位置: 网页特效 -> 背景图像 -> 很酷的图片伸缩放大功能

很酷的图片伸缩放大功能

作者:admin 发布时间:2009-7-23 10:19:00 发布人: admin

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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>很酷的图片伸缩功能 alixixi.com</title>
</head>

<body>
应有尽有的网页特效网址：<a href="http://web.archive.org/web/20150530054647/http://myjs.jz123.cn/">http://myjs.jz123.cn</a>，好资源一起分享。
<script>
var isIE = (document.all) ? true : false;
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var extend = function()
 {
      var args = arguments;
      if(!args[1])args = [this,args[0]];                                       
      for(var property in args[1])args[0][property] = args[1][property];         
      return args[0];
 };
 
var Class = function(properties){
   var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
   _class.prototype = properties;
   return _class;
 };
 
var Tween = {
    Quintic:{
    easeOut: function(t,b,c,d){
     return c*((t=t/d-1)*t*t*t*t + 1) + b;
    }
            }
}

var FadeStruct = function(options){
 //this.run = false;//是否渐变
 this.start = 0;//开始值
 //this.end = 0;//结束值
 this.target = 0;//当前值
 extend(this, options || {});
}   
 
var Fade = new Class({
 options:{
     Opacity:  {},   //透明渐变参数
  Height :  {},   //高度渐变参数
  Width  :  {},   //宽度渐变参数
  Top    :  {},   //Top渐变参数
  Left   :  {},   //Left渐变参数
  step   :  80,   //执行多少次到达目标位置
     time   :   2,   //多少时间执行一次
  num    :   0,    //记录执行了多少次了
  show   :   true   //图片一开始是展开的
 },
 initialize:function(elm){
  this.elm    = elm;
  this.timer  = null;
  this.finish = true;
  this.fun   = function(){};
  this.original = [parseInt(CurrentStyle(this.elm).width),parseInt(CurrentStyle(this.elm).height),parseInt(CurrentStyle(this.elm).left),parseInt(CurrentStyle(this.elm).top)];    // 记录刚开始时,elm的长 宽 left  和 top
     this.Height = new FadeStruct();
  this.Width  = new FadeStruct();
  this.Top    = new FadeStruct();
  this.Left   = new FadeStruct();
  this.Alpha  = new FadeStruct();
  this.Opacity= new FadeStruct() 
 ///////////////////////////////////////////////////////////////////////////////////////////////////
  extend(this.Height,this.options.Height);
  extend(this.Width,this.options.Width);
  extend(this.Left,this.options.Left);
  extend(this.Top,this.options.Top);
  extend(this.Opacity,this.options.Opacity);
  extend(this.Alpha,this.options.Alpha);
        this.step   = this.options.step;
     this.time   = this.options.time;
  this.num    = this.options.num;
  this.show   = this.options.show;
 /////////////////////////////////////////////////////////////////////////////////////////////////// 
  this.fun = function(){this.SetHeight();this.SetWidth();this.SetLeft();this.SetTop();this.SetBorder(),this.SetAlpha()}
 },
 Start:function(){
  clearTimeout(this.timer);
  this.num =0 
  this.show = !this.show;
  this.Run();
 },
 Run:function(){
     var self = this;
  this.num++;
  this.fun();
  if(this.num>this.step)
  {clearTimeout(this.timer);return;}
  else
  { this.timer = setTimeout(function(){self.Run()},this.time)}
 },
 SetHeight:function(){
  this.elm.style.height = this.MotoTo(this.num,this.Height.start,this.Height.target,this.step)+'px';
 },
 SetWidth:function(){
  this.elm.style.width  = this.MotoTo(this.num,this.Width.start,this.Width.target,this.step)+'px';
 },
 SetLeft:function(){
  this.elm.style.left   = this.MotoTo(this.num,this.Left.start,this.Left.target,this.step)+'px';
 },
 SetTop:function(){
  this.elm.style.top   = this.MotoTo(this.num,this.Top.start,this.Top.target,this.step)+'px';
 },
 SetBorder:function(){
  this.elm.style.borderWidth = (!this.show)? parseInt(10*(1-this.num/this.step)) + 'px':(this.num/this.step)*10+'px';
 },
 SetAlpha :function(){
  var img = this.elm.getElementsByTagName('img')[0];
  if(isIE)
  {img.style.filter = "alpha(opacity:" + this.MotoTo(this.num,this.Alpha.start,this.Alpha.target,this.step)+ ")"}
  else
  {img.style.opacity = parseInt(this.MotoTo(this.num,this.Alpha.start,this.Alpha.target,this.step))/100}
 },
 MotoTo:function(t,b,c,d){
  return Math.round(Tween.Quintic.easeOut(t,b,c,d));
 }
})   
</script>
<body style="margin:0px; padding:0px;">
<div id="ss" style="height:500px; width:333px; border:10px solid #999999; position:absolute; left:50px; top:50px; overflow:hidden">
<img id="sss" src="http://web.archive.org/web/20150530054647im_/http://img1.gtimg.com/ent/pics/19202/19202401.jpg" height="500" width="333px;" style="filter:alpha(opacity:100); opacity:1">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ssss"></div>
<script>

var ss =new Fade($('ss'))
document.onmousedown =function(event){
   var e = event || window.event;
   if(ss.show)
   {    
  ss.Width.start  = parseInt(CurrentStyle(ss.elm).width);  ss.Width.target  = -ss.Width.start;
  ss.Height.start = parseInt(CurrentStyle(ss.elm).height); ss.Height.target = -ss.Height.start;
  ss.Left.start   = parseInt(CurrentStyle(ss.elm).left);   ss.Left.target   = e.clientX - ss.Left.start;
        ss.Top.start    = parseInt(CurrentStyle(ss.elm).top);    ss.Top.target    = e.clientY - ss.Top.start;
       if(isIE)
    {  ss.Alpha.start = ss.elm.getElementsByTagName('img')[0].filters.alpha.opacity; ss.Alpha.target = -ss.Alpha.start;}
    else
    {  ss.Alpha.start = parseInt(CurrentStyle(ss.elm.getElementsByTagName('img')[0]).opacity)*100; ss.Alpha.target = (-ss.Alpha.start)*100;}
   }
   else
   {
  ss.Width.start  = parseInt(CurrentStyle(ss.elm).width);  ss.Width.target  = ss.original[0] - ss.Width.start;
  ss.Height.start = parseInt(CurrentStyle(ss.elm).height); ss.Height.target = ss.original[1] - ss.Height.start;
  ss.Left.start   = parseInt(CurrentStyle(ss.elm).left);   ss.Left.target   = ss.original[2] - ss.Left.start;
  ss.Top.start    = parseInt(CurrentStyle(ss.elm).top);    ss.Top.target    = ss.original[3] - ss.Top.start;
    if(isIE)
    {  ss.Alpha.start = ss.elm.getElementsByTagName('img')[0].filters.alpha.opacity; ss.Alpha.target = 100-ss.Alpha.start;}
    else
    {  ss.Alpha.start = parseInt(CurrentStyle(ss.elm.getElementsByTagName('img')[0]).opacity)*100; ss.Alpha.target = 100-ss.Alpha.start;}
   }
   ss.Start();
}
</script>

</body>
</html>

很酷的图片伸缩放大功能

将本文收藏到QQ书签与更多好友分享

上一篇：文章：全面支持火狐与IE的flash图片切换特效下一篇：文章：层提示效果