用javascript实现画图效果的代码

更新时间：2007年07月03日 00:00:00 作者：

<!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=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body>     <div id="apDiv1"></div>     <div id="apDiv2"></div> <div id="apDiv3"></div> <div id="apDiv4"></div> </body> </html> <script language="javascript" type="text/javascript"> function $(pId){  return document.getElementById(pId); } function JPos(){   } JPos.getAbsPos = function(pTarget){  var _x = 0;  var _y = 0;  while(pTarget.offsetParent){    _x += pTarget.offsetLeft;    _y += pTarget.offsetTop;    pTarget = pTarget.offsetParent;  }  _x += pTarget.offsetLeft;  _y += pTarget.offsetTop;    return {x:_x,y:_y}; } function JAniObj(){  this.obj = null;  this.interval = null;    this.orgPos = null;  this.targetPos = null;    this.orgSize = {w:50,y:50};  //初始长宽  this.targetSize = {w:100,y:100}; //目标长宽  this.step  = {x:10,y:10};  //步长 x:x方向　y:y方向  this.alpha  = {s:10,e:90,t:10};  //透明度，s初始，e结束,t步长 } function JAni(){  var self = this;  var aniObjs = {};    var getCurrentStyleProperty = function(pObj,pProperty){   try{     if(pObj.currentStyle)     return eval("pObj.currentStyle." + pProperty);    else     return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);   }catch(e){    alert(e);   }  }    this.popup = function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){      var aniObj = new JAniObj();   aniObjs[pDiv] = aniObj;      with(aniObj){    obj   = $(pDiv);    orgPos  = JPos.getAbsPos(obj);    orgSize  = pOrgSize;    targetSize = pTargetSize;    step  = pStep;    alpha  = pAlpha;        with(obj.style){     overflow = "hidden";     position = "absolute";     width = pOrgSize.w + "px";     height = pOrgSize.h + "px";     left = orgPos.x + "px";     top = orgPos.y + "px";      if(document.all){      filter = "Alpha(opacity=" + pAlpha.s + ")";     }else      opacity = pAlpha.s / 100;    }      }      aniObj.interval = setInterval("popup_('" + pDiv + "')",10);  }    popup_ = function(pDivId){         pObj = aniObjs[pDivId];      var w = parseInt(pObj.obj.style.width);   var h = parseInt(pObj.obj.style.height);         if(w >= Math.abs(pObj.targetSize.w) && h >= Math.abs(pObj.targetSize.h)){    clearInterval(pObj.interval);    if(document.all)     pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")";    else     pObj.obj.style.opacity = pObj.alpha.e / 100;                delete aniObjs[pObj.obj.id];   }else{    if(w < Math.abs(pObj.targetSize.w))     w += pObj.step.x;         if(h < Math.abs(pObj.targetSize.h))     h += pObj.step.y;         if(document.all){     var pattern = /opacity=(\d{1,3})/;     var result = pattern.exec(pObj.obj.style.filter);     if(result != null){      if(result[1] < pObj.alpha.e)       pObj.obj.style.filter = "Alpha(opacity=" + (result[1] + pObj.alpha.t) + ")"      else       pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")";     }    }else{     if(pObj.obj.style.opacity < pObj.alpha.e / 100){      pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity) + pObj.alpha.t / 100;     }else      pObj.obj.style.opacity = pObj.alpha.e / 100;    }   }      pObj.obj.style.width = w + "px";   pObj.obj.style.height = h + "px";      if(pObj.targetSize.w < 0){    var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left"));    vLeft = isNaN(vLeft) ? 0 : vLeft;    pObj.obj.style.left = vLeft - pObj.step.x + "px";   }      if(pObj.targetSize.h < 0){    var vTop = parseInt(getCurrentStyleProperty(pObj.obj,"top"));    vTop = isNaN(vTop) ? 0 : vTop;    pObj.obj.style.top = vTop - pObj.step.y + "px";   }    } } var ani = new JAni();  ani.popup(     "apDiv1",     {w:50,h:50}, //初始长宽     {w:200,h:200}, //目标长宽     {x:8,y:8},  //步长     {s:10,e:80,t:10}//透明度 起始，结束，步长     );       ani.popup(     "apDiv2",     {w:50,h:50}, //初始长宽     {w:-200,h:200}, //目标长宽     {x:8,y:8},  //步长     {s:10,e:40,t:2}//透明度 起始，结束，步长     );       ani.popup(     "apDiv3",     {w:50,h:50}, //初始长宽     {w:-200,h:-200},//目标长宽     {x:8,y:8},  //步长     {s:10,e:40,t:10}//透明度 起始，结束，步长     );  ani.popup(     "apDiv4",     {w:50,h:50}, //初始长宽     {w:200,h:-200},//目标长宽     {x:8,y:8},  //步长     {s:10,e:50,t:10}//透明度 起始，结束，步长     );   </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

用javascript实现画图效果的代码

使用selenium抓取淘宝的商品信息实例
下面小编就为大家分享一篇使用selenium抓取淘宝的商品信息实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
layer页面跳转,获取html子节点元素的值方法
今天小编就为大家分享一篇layer页面跳转,获取html子节点元素的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Bootstrap实现的表格合并单元格示例
这篇文章主要介绍了Bootstrap实现的表格合并单元格,涉及bootstrap界面布局相关操作技巧,需要的朋友可以参考下
2018-02-02
详解JavaScript前端如何实现截屏功能
这篇文章主要为大家详细介绍了JavaScript前端如何实现截屏功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
js查找节点的方法小结
这篇文章主要介绍了js查找节点的方法,实例总结了查找节点常用的三种方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
JavaScript中document获取元素方法示例详解
这篇文章主要介绍了JavaScript中获取页面元素的几种常用方法,分别是getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()和querySelectorAll(),每种方法都有其特点和适用场景,需要的朋友可以参考下
2025-03-03
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
这篇文章主要介绍了浅谈Vue3.0之前你必须知道的TypeScript实战技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
微信小程序学习总结（三）条件、模板、文件引用实例分析
这篇文章主要介绍了微信小程序条件、模板、文件引用,结合实例形式分析了微信小程序if条件判断、模板调用、wxss文件引用等相关操作技巧,需要的朋友可以参考下
2020-06-06
javascript中数组的定义及使用实例
这篇文章主要介绍了javascript中数组的定义及使用方法,实例分析了数组的定义及使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-01-01
如何为你的JavaScript代码日志着色详解
这篇文章主要给大家介绍了关于如何为你的JavaScript代码日志进行着色的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04

用javascript实现画图效果的代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具