26顶

很酷的图片伸缩放大功能

稿源：互联网 2022-06-15 18:23:58 点击： 9849 撤稿纠错

这款图片伸缩放大特效非常酷，与普通的放大特效有很大差别，阿里西西极力推荐。

以下讨论的是和图片放大特效相关的很酷的图片伸缩放大功能教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<%@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://js.alixixi.com">js.alixixi.com</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://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>

关于很酷的图片伸缩放大功能的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009072156972.shtml方便下次再访问哦。

·上一篇： 图片背景自适应特效
·下一篇： 全面支持火狐与IE的flash图片切换特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

很酷的图片伸缩放大功能

文章分类LIST >>返回首页

最新游戏

最新新闻