用javascript实现画图效果的代码

Untitled Document

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • angularJS结合canvas画图例子

    这里给大家分享一个angularJS结合canvas画图例子,效果非常不错,赞一个先. 复制代码 代码如下: <!DOCTYPE html> <html ng-app="APP"> <head>     <meta charset="UTF-8">   <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js&

  • javascript CSS画图之基础篇

    一.图显示的样式,即图形的颜色.透明度等:二.算法,即图形的样子,是简单的线.矩形.圆形.扇形.多边形等,javascript和CSS无疑是最佳搭档,所有的矢量图形最基本的元素是1*1px的点,点可以成线.成面,成任意图形.一切矢量图的根本____1*1px的点 如果对CSS有一定的了解,对 clip:rect(top,right,bottom,left)熟悉的话,可以知道,代码剪辑出一个区域,需要注意的是,clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的,另外在此positi

  • 使用JS画图之点、线、面

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

  • 使用js画图之饼图

    使用js画图之饼图 饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 复制代码 代码如下: //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){     if(data && data.length > 0){         var accumulationAngleOfSlope = new Number(0); //累计偏移角

  • JS画图(非VML)--兼容IE/FF

    Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot

  • 兼容FireFox 用javascript写的一个画图函数

    早晨醒来突然想写一个画图函数,以前在网上看到有人做过,但都是用VML做的,只有ie支持. 偶这个是用<div>形成的绝对定位的点画出来的,兼容各种浏览器. Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. *

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • js面向对象实现canvas制作彩虹球喷枪效果

    js面向对象实现canvas制作彩虹球喷枪效果

    前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码 代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2

  • 使用js画图之正弦曲线

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: 复制代码 代码如下: //画正弦曲线 //dot 原点 //amplitude    振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palst

  • 使用js画图之圆、弧、扇形

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 复制代码 代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){     var pstart = [dot[0]

随机推荐