设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网络编程 › 用javascript实现画图效果的代码

发新帖

查看: 176|回复: 16

[JavaScript] 用javascript实现画图效果的代码

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2007-7-3 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> 
     
     
 
 
</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需刷新才能执行]

画图, 效果, 代码

相关帖子

回复

使用道具举报

13 主题	2万回帖	97 积分

Rank: 2

积分: 97

发消息

发表于 2022-10-11 02:40:45 | 显示全部楼层

呵呵呵呵呵呵

回复支持反对

使用道具举报

14 主题	1万回帖	75 积分

Rank: 2

积分: 75

发消息

发表于 2023-1-18 22:48:31 | 显示全部楼层

而快乐你们快乐马年快乐

回复支持反对

使用道具举报

1 主题	1万回帖	93 积分

Rank: 2

积分: 93

发消息

发表于 2023-5-8 06:56:38 | 显示全部楼层

这个源码还可以

回复支持反对

使用道具举报

14 主题	1万回帖	75 积分

Rank: 2

积分: 75

发消息

发表于 2023-5-25 15:55:48 | 显示全部楼层

好人好人好人好人

回复支持反对

使用道具举报

1 主题	2万回帖	69 积分

Rank: 2

积分: 69

发消息

发表于 2023-6-24 00:15:16 | 显示全部楼层

还有人在不。。。。。。。。。。啊

回复支持反对

使用道具举报

1 主题	2万回帖	321 积分

Rank: 3 Rank: 3

积分: 321

发消息

发表于 2023-10-14 06:47:39 | 显示全部楼层

呵呵呵呵呵呵

回复支持反对

使用道具举报

6 主题	2万回帖	425 积分

Rank: 3 Rank: 3

积分: 425

发消息

发表于 2024-4-23 00:40:07 | 显示全部楼层

好东西一定要看看！

回复支持反对

使用道具举报

6 主题	1万回帖	174 积分

Rank: 2

积分: 174

发消息

发表于 2024-6-14 02:58:54 | 显示全部楼层

而快乐你们快乐马年快乐

回复支持反对

使用道具举报

4 主题	2万回帖	107 积分

Rank: 2

积分: 107

发消息

发表于 2024-6-27 14:13:44 | 显示全部楼层

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-3 05:03 , Processed in 0.112637 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表