群组首页 → Web前端 → javascript研究小组 → 论坛
发表回复

点击图片旋转

LuoYer 2010-03-26
大家好，根据www.dhteumeuleu.com上的代码，做了个图片旋转效果，但由于刚接触js，在旋转前有闪烁的问题，希望大家提出解决方法，谢谢！
我只是新上手做试验看看，如果大家用代码的话，请不要将“www.dhteumeuleu.com”相关的注释去掉。
怎么传附件 啊。
点击旋转主要是这么处理的：
if(!rid) {
// first clear origin images
if(orip.style.visibility == "visible") orip.style.visibility = "hidden";
// start rotateAnimate
rid = setInterval(mainloop, 32);
}
图片不会传，弄个110*80的就可以了
LuoYer 2010-03-26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<title>squadron - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at
http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="./arrow_data/arrow.css" />

<script type="text/javascript" src="arrow_data/imgRotate.js"></script>

<script type="text/javascript">
// =====================================================================
// script written by  Gerard Ferrandez
// http://www.dhteumeuleu.com
// ===================================================
// IE DXTransform version - February 2004
// Firefox/Opera <canvas> version - July 2006
// uses imgRotate.js mini-library
// =====================================================================
//

var nw = 0;
var nh = 0;
////////////////////////
var o;
var rid = false;
var orip

function resize() {
var scr = document.getElementById("screen");
nw = scr.offsetWidth;
nh = scr.offsetHeight;
canvas.resize(nw, nh);
o.cx = nw / 2;
o.cy = nh / 2 ;
}

document.onmousedown = function(e) {
if (window.event) e=window.event;

if(!rid) {
// first clear origin images
if(orip.style.visibility == "visible") orip.style.visibility = "hidden";
// start rotateAnimate
rid = setInterval(mainloop, 32);
}
}

function mainloop() {
omoving = false;
if (isCanvas) context.clearRect(0, 0, nw, nh);
o.rotate();
o.O.drawImage(o.cx, o.cy, o.ang, 1);
if (o.rmoving) omoving = true;

if (!omoving && rid) {
clearInterval(rid);
rid = false;
}
}

onload = function() {
orip = document.getElementById("matrixImages").getElementsByTagName("img").item(0);
orip.style.visibility = "visible";
/* ==== create Canvas container ==== */
canvas = createCanvas(document.getElementById("screen"));
/* ==== create structure ==== */
o = new Rotate(orip);
resize();
o.rTarget(60);

}

</script>
</head>
<body>
<div id="screen">
<canvas height="455" width="320" style="position:
absolute; width: 320px; height: 455px;">
</canvas>
</div>

<div id="matrixImages">
<img src="arrow_data/CAMR81O9.gif">
</div>

</body>
</html>

    

    

      
      
        
        
        
        
      
    

  		




  
  
    

      LuoYer
      2010-03-26
    

    
 
      arrow.css
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #fff;
		position: absolute;
		width: 80%;
		height: 100%;
	}
	#screen { /* 320 * 455 */
		margin: 0px;
		padding: 0px;
		left: 0px;
		top: 0px;
		width: 320px;
		height: 455px;
		background-color: #ccc;
		position: absolute;
		overflow: hidden;
	}
	#matrixImages /* 110 * 80 */
	{
		position: absolute;
		left: 105px;
		top: 188px;
		visibility: auto;
	}
    

    

      
      
        
        
        
        
      
    

  		




  
  
    

      LuoYer
      2010-03-26
    

    
 
      imgRotate.js

////////////////////////////////////////////////////////////
// images rotate() mini library 
// IE : DXTransform Matrix filter
// Firefox/Opera : <canvas> implementation
// ===============================================
// written by Gerard Ferrandez
// initial version - July 18, 2006
// www.dhteumeuleu.com
// modified - July 20, 2006 - optional drawImage arguments
// modified - July 22, 2006 - object functions
// modified - Oct 24, 2006 - preload images
////////////////////////////////////////////////////////////

var canvas   = false;
var context  = false;
var isCanvas = (document.createElement("canvas").getContext) ? true : false;

createCanvas = function(o) {
	if (isCanvas) {
		canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = nw + "px";
		canvas.style.height = nh + "px";
		o.appendChild(canvas);
		context = canvas.getContext("2d");
		canvas.resize = function(w, h) {
			if (canvas) {
				canvas.width = w;
				canvas.height = h;
				canvas.style.width = w + "px";
				canvas.style.height = h + "px";
			}
		}
		return canvas;
	} else {
		o.resize = function(w, h) {
			return false;
		}
		return o;
	}
}

if (isCanvas) {
	/* ==== Canvas compatible ==== */
	createImage = function(imgsrc, FilterType) {
		img = new Image();
		img.src = imgsrc.src;
		img.sx = 0;
		img.sy = 0;
		img.w = 0;
		img.h = 0;
		img.loaded = false;
		img.onload = function(){
			this.sx = this.width * .5;
			this.sy = this.height * .5;
			this.w = this.width;
			this.h = this.height;
			this.loaded = true;
		}

		img.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) { 
			if (sx == undefined) sx = this.sx, sy = this.sy;
			if (w == undefined) w = this.w, h = this.h;
			if(this.loaded) {
				context.save();
				context.globalAlpha = alpha;
				context.translate(x, y);
				context.rotate(rotation);
				context.drawImage(this, Math.round(-sx), Math.round(-sy), Math.round(w), Math.round(h));
				context.restore();
			}
		}
		return img;
	}
} else {
	/* ==== IE6/IE7 ==== */
	createImage = function(imgsrc, FilterType) {
		var o = document.createElement("img");
		o.src = imgsrc.src;
		o.style.position = "absolute";
		o.style.left = "-10000px";
		o.style.filter = "progid:DXImageTransform.Microsoft.matrix(FilterType="+FilterType+", sizingMethod=\"auto expand\") alpha(opacity=100)";
		o.sx = 0;
		o.sy = 0;
		o.w = 0;
		o.h = 0;
		o.loaded = false;
		o.rs = true;
		o.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) {
			if (this.complete) {
				if (!o.loaded) {
					this.sx = this.width * .5, this.sy = this.height * .5;
					this.w = this.width, this.h = this.height;
					o.loaded = true;
				}
				if (sx == undefined) sx = this.sx, sy = this.sy;
				if (w == undefined) this.rs = false, w = this.w, h = this.h;
				var cos = Math.cos(rotation);
				var sin = Math.sin(rotation);
				var f = this.filters.item(0);
				f.M11 = cos;
				f.M12 = -sin;
				f.M21 = sin;
				f.M22 = cos;
				this.style.left   = Math.round(x - sin * ((sin > 0) ? h-sy : -sy) - cos * ((cos > 0) ? sx : sx-w)) + "px";
				this.style.top    = Math.round(y - sin * ((sin > 0) ? sx : sx-w) - cos * ((cos > 0) ? sy : sy-h)) + "px";
				if (this.rs) {
					this.style.width  = Math.round(w) + "px";
					this.style.height = Math.round(h) + "px";
				}
				this.filters.item(1).opacity = Math.round(alpha * 100);
			}
		}
		canvas.appendChild(o);
		return o;
	}
	
}
//////////////////////////////////////////////////////////////////////////
function Rotate(img) {
	// the axis coordinate, image rotate
	this.cx  = 0; this.cy  = 0;
	this.ang = 0;
	this.O = createImage(img, "nearest");
}

Rotate.prototype = {
	rotate : function() {
		if(this.m == 0 && this.s == -1) {
			this.rmoving = false;
			return this.ang;
		}
		this.rmoving = true;
		this.m += this.s;
		// 2 - speed uniformity , use this.m execute speed variations
		this.ang += (this.d * 2 * .0005);
		if(this.m == 10) this.s = -1;
		return this.ang;
	},
	rTarget : function(ang) {
		this.m = 0;
		this.s = 1;
		this.d = ang - this.ang;
	}
}
    

    

      
      
        
        
        
        
      
    

  		



  





  
 发表回复

  











        


        

        





      


      

    

    



   Global site tag (gtag.js) - Google Analytics