图片翻转

最新推荐文章于 2024-10-04 06:11:34 发布

mengli0641

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量148

点赞数

分类专栏： HTML/JavaScript 文章标签： function input constructor button xhtml div

本文链接：https://blog.csdn.net/mengli0641/article/details/7080319

版权

HTML/JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 这是摘自网上的图片翻页效果

<!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>JS实现图片的旋转效果</title>

<style type="text/css">
*{margin:0;padding:0;}
.item{float:left;border:5px solid #00469d;width:350px;}
</style>

</head>
<body>
<div class="item">
 <input type="button" value="left" />
 <input type="button" value="right" />
 <br/>
 <img src="d:\My Documents\My Pictures\17.jpg" />
</div>
<script type="text/javascript">
window.onload = function(){// 1
 init(document.getElementsByTagName("div"));
}

function init(divs){// 2
 for(var i = 0, len = divs.length; i < len; i++){ //对 div进行遍历
  (function(o){
   var left = o.getElementsByTagName("input")[0],//左旋转按钮
    right = o.getElementsByTagName("input")[1], //右旋转按钮
    img = o.getElementsByTagName("img")[0], // img 图片对象
    rotate = new Rotate(img);
   left.onclick = function(){
    rotate.runLeft();
   };
   right.onclick = function(){
    rotate.runRight();
   }   
  })(divs[i]);
 }
}

function Rotate(img){// 3
 this.init(img);//img  HtmlImageElement
}

Rotate.prototype = {
 constructor : Rotate,
 init : function(img){ // 4 初始化图片对象
   this.img = img; // img HtmlImageElement
   this.initWidth = this.img.width;//120
   this.initHeight = this.img.height;//120
   
/*
  if(!document.all || window.opera){//document.all  Object HtmlCollection
   var canvas = document.createElement("canvas");
   this.ctx = canvas.getContext('2d');
   canvas.setAttribute("width", this.img.width);
   canvas.setAttribute("height", this.img.height);  
   this.ctx.drawImage(this.img,0,0);
   this.ghost = this.img;
   this.img.parentNode.replaceChild(canvas,this.img);
   this.img = canvas;
  }
*/
  this.direction = 0;
 },
 run : function(){
  if(document.all && !window.opera){//IE 
   this.img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + this.direction + ')';
   alert("初始化:"+this.initWidth+" "+this.initHeight);
   var rate = this.img.width / this.img.height;
   alert("rate:"+rate);
   if(this.direction % 2 != 0){
    this.img.width = Math.min(rate * this.initWidth , this.initWidth);
    this.img.height = this.initWidth;
   }else{
    this.img.width = this.initWidth;
    this.img.height = this.initHeight;     
   } 
   alert("结果:"+this.img.width+" "+this.img.height);
   /*
  }else{
   var w = h = dx = dy = a = 0;
   switch (this.direction){
    case 0:
     w = this.ghost.width;
     h = this.ghost.height; 
     dx = 0;
     dy = 0;        
     a = 0;
     break;
    case 1:
     w = this.ghost.height;
     h = this.ghost.width;
     dx = 0;
     dy = - this.ghost.height;        
     a = 90 * Math.PI / 180;    
     break;
    case 2:
     w = this.ghost.width;
     h = this.ghost.height;
     dx = - this.ghost.width;
     dy = - this.ghost.height;
     a = 180 * Math.PI / 180;     
     break;
    case 3:
     w = this.ghost.height;
     h = this.ghost.width;
     dx = - this.ghost.width;
     dy = 0;   
     a = 270 * Math.PI / 180;     
     break;
   } 
   console.log(this.direction); 
   this.img.setAttribute('width', w);
   this.img.setAttribute('height', h);
   this.ctx.rotate(a);
   this.ctx.drawImage(this.ghost, dx, dy); 
   if(this.direction === 1 || this.direction === 3 ){
    this.img.style.width = Math.min(this.ghost.width, this.initHeight) + "px";
   }
  */
  }
 },
 runLeft : function(){ 
  this.direction--;// this.direction  0 1 2 3
  if(this.direction < 0){
   this.direction = 3;
  }
  if(this.direction >= 4){
   this.direction = 0;
  }
  this.run();
 },
 runRight : function(){ 
  this.direction++; 
  if(this.direction < 0){
   this.direction = 3;
  }
  if(this.direction > 3){
   this.direction = 0;
  }
  this.run();
 }
};


</script>
</body>
</html>

<br><br><hr><p align="center"></p>

2 这是只能在IE上翻转的效果

leftImg = new Span();
var direction = 0;
leftImg.onclick = function(){//leftImg 为左翻转按钮
   direction--;
    if(direction < 0){
     direction = 3;
    }
    if(direction >= 4){
     direction = 0;
    }
    _this.run(direction);
  }
rightImg.onclick = function(){
   direction++;
    if(direction < 0){
     direction = 3;
    }
    if(direction > 3){
     direction = 0;
    }
    _this.run(direction);
}

js.dbui.Img.prototype.run = function(direction){
	 this.BigImg.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + direction + ')';
   var imgheight = Number(this.BigImg.style.width.toString().replace("px",""));
   var imgwidth  = Number(this.BigImg.style.height.toString().replace("px",""));
   var rate =  imgheight/imgwidth ;
   if(Number(direction) % 2 != 0){
    this.BigImg.style.width = Math.min(rate * imgwidth , imgwidth);
    this.BigImg.style.height = imgwidth;
   }else{
    this.BigImg.style.width = imgwidth;
    this.BigImg.style.height = imgheight;
   }
}