缩放！所有的东西都可以缩放！
一些比较炫的响应式网站会在一定范围内有缩放效果。当然，js可以搞定～
以前就用过的全屏缩放类：
// CLASS
function imgzoom(srcWidth,srcHeight,maxWidth,maxHeight){
this.srcWidth=srcWidth;//获得原始宽度
this.srcHeight=srcHeight;//获得原始高度
this.maxWidth=maxWidth;//获得限定宽度
this.maxHeight=maxHeight;//获得限定高度
this.newWidth;
this.newHeight;
}
imgzoom.prototype.getHeightSize=function(){
this.newHeight=this.maxHeight;
this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight;
return [this.newWidth,this.newHeight];
}
imgzoom.prototype.getSize=function (){
this.newWidth=this.maxWidth;
this.newHeight=(this.srcHeight*this.maxWidth)/this.srcWidth;
if(this.newHeight<this.maxHeight){
this.newHeight=this.maxHeight;
this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight;
}
var srcNum=this.srcWidth/this.srcHeight;
var maxNum=this.maxWidth/this.maxHeight;
if(srcNum>=maxNum){
//比较高宽比例，确定以宽或者是高为基准进行计算。
if(this.srcWidth>this.maxWidth){//以宽为基准开始计算，
//当宽度大于限定宽度，开始缩放
this.newWidth=this.maxWidth;
this.newHeight=(this.srcHeight*this.maxWidth)/this.srcWidth
}else{
//当宽度小于限定宽度，直接返回原始数值。
this.newWidth=this.srcWidth;
this.newHeight=this.srcHeight;
}
}else{
if(this.srcHeight>this.maxHeight){//以高为基准，进行计算
//当高度大于限定高度，开始缩放。
this.newHeight=this.maxHeight;
this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight
}else{
//当高度小于限定高度，直接返回原始数值。
this.newWidth=this.srcWidth;
this.newHeight=this.srcHeight;
}
}
return [this.newWidth,this.newHeight]
}
function Simpzoom(srcWidth,srcHeight,maxWidth,nowWidth){
var num=maxWidth*srcWidth / nowWidth;
var _width=srcWidth*srcWidth / num;
var _height=(srcHeight*_width) / srcWidth;
console.log(_width,_height);
return [_width,_height]
}
后来做项目的时候，本来一位jquery做animation的元素需要缩放：
// JavaScript Document
(function(window){
var scaleElement = window.scaleElement = function(selector,parameter){
return new scaleElement.fn.init(selector,parameter);
};
scaleElement.fn=scaleElement.prototype={
init:function(selector,parameter){//此处的this作用域指向o.fn
//====
var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;
var match,elem;
match = quickExpr.exec( selector );
elem=document.getElementById( match[2]);
if ( elem && elem.parentNode ) {
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
},
images:function (){
var parameter=arguments||null;
if(!parameter)return;
// console.log(this..offsetLeft)
new creatHtmlElement("img",this[0],{css:{position:"absolute",left:0,top:0},value:{src:parameter[0]}});
new creatHtmlElement("img",this[0],{css:{position:"absolute",left:parameter[2]-this[0]._width,top:parameter[4],width:parameter[2],height:parameter[3]},value:{src:parameter[1]}});
},
hover:function (){
var parameter=arguments||null;
if(!parameter)return;
var _this=this;
var time=parameter[3]||1;
this[0].onmouseover=function(){
var _mask=_this.getElement(1);
TweenMax.to(_mask,time,{css:{top:-parameter[1]+parameter[2]+5,left:0},ease:Circ.easeOut});
}
this[0].onmouseout=function(){
var _mask=_this.getElement(1);
TweenMax.to(_mask,time,{css:{top:parameter[1]-parameter[2],left:-(parameter[0]-_this[0]._width)},ease:Circ.easeOut});
}
},
allHover:function (){
var parameter=arguments||null;
if(!parameter) return;
if(typeof parameter[0]=="string"){
for(var i=0;i<this.size(parameter[0]);i++){
var _elem=this.getElement(i,parameter[0]);
_elem.index=i;
_elem.onmouseover=function (e){
if(checkHover(e,this)){
parameter[1](this,"over");
}
}
_elem.onmouseout=function (e){
if(checkHover(e,this)){
parameter[1](this,"out");
}
}
}
}else{
this[0].onclick=function (){
parameter[0](this);
}
}
},
over:function(){
var parameter=arguments||null;
if(!parameter)return;
var _mask=this.getElement(1);
TweenMax.to(_mask,2,{css:{top:parameter[1]-parameter[2],left:0},ease:Circ.easeOut});
},
out:function(){
var parameter=arguments||null;
if(!parameter)return;
var _mask=this.getElement(1);
TweenMax.to(_mask,2,{css:{top:-parameter[1]+parameter[2]+5,left:-(parameter[0]-this[0]._width)},ease:Circ.easeOut});
},
nowStatus:function (){
},
scale:function (srcWidth,srcHeight,maxWidth,nowWidth){
var num=maxWidth*srcWidth / nowWidth;
var _width=srcWidth*srcWidth / num;
var _height=(srcHeight*_width) / srcWidth;
this[0].style.width=_width+‘px‘;
this[0].style.height=_height+‘px‘;
this[0]._width=_width;
var _img=this.getElement(0);
_img.style.width=_width+‘px‘;
_img.style.height=_height+‘px‘;
},
size:function(type){
var _type=type||null;
if(!_type){
return this[0].getElementsByTagName("*").length;
}else{
return this[0].getElementsByTagName(type).length;
}
},
getElement:function (i,type){
var _type=type||null;
if(!_type){
return this[0].getElementsByTagName("*")[i];
}else{
return this[0].getElementsByTagName(type)[i];
}
}
};
scaleElement.fn.init.prototype = scaleElement.fn;
})(window)
然后用的时候，搞了很多数组，用来储存原始尺寸，在原始尺寸的基础上根据窗口大小等比例缩放：
ar sizeArr=[];
//var smallArr=[];The old way. Already scaled in ScaleElement.js
var titleArr=[];
var topArr=[];
var topLongArr=[];
var topShortArr=[];
var navbgArr=[];
var toplogoArr=[];
var nav0Arr=[];function windowSize(){
/*init newArr for all*/
newArr=getHtmlSize();//这里因为没用jquery用的是一个原生js获取窗口尺寸的数组［0］是宽，［1］是高
/*top*/
topArr=Simpzoom(1190,30,1190,newArr[0]);
$("#top").css({"height":topArr[1]});
topLongArr=Simpzoom(48,14,1050,newArr[0]);
$(".top_0").css({"width":topLongArr[0],"height":topLongArr[1]});
$(".top_1").css({"width":topLongArr[0],"height":topLongArr[1]});
topShortArr=Simpzoom(24,14,1050,newArr[0]);
$(".top_2").css({"width":topShortArr[0],"height":topShortArr[1]});
/*top log*/
toplogoArr=Simpzoom(256,144,1190,newArr[0]);
$("#top_logo").css({"width":toplogoArr[0],"height":toplogoArr[1]});
/*nav bg*/
navbgArr=Simpzoom(1190,88,1190,newArr[0]);
$("#nav_bg").css({"height":navbgArr[1]});
/*nav butttons*/
nav0Arr=Simpzoom(146,52,1050,newArr[0]);
$("#nav").css({"top":(navbgArr[1]+topArr[1]-nav0Arr[1])/2+topArr[1]})
$(".nav_0").css({"width":nav0Arr[0],"height":nav0Arr[1]});
/*slider banner*/
var _width=newArr[0]<1960?newArr[0]:1960;
$(‘#box‘).css({width:_width});
sizeArr=(new imgzoom(1840,642,newArr[0],newArr[1]).getSize()); //JS get inline style height instead of css auto sizing
//var _banner_w=sizeArr[0]<newArr[0]?newArr[0]:sizeArr[0]+"px";
document.getElementById("banner_0").style.height = document.getElementById("slider_blank").style.height =sizeArr[1]+"px";
$("#slider_blank").css({"margin-top":toplogoArr[1]+topArr[1]});
/*slider small*/
smallArr=Simpzoom(438,152,1887,newArr[0]);
$("#slider_small").css({"height":smallArr[1]});
for(var i=0; i<4; i++){
scaleElement("#small_"+i).scale(438,152,1887,newArr[0]);
//$(".small_"+i).css({"width":smallArr[0],"height":smallArr[1]}); The old way. Already scaled in ScaleElement.js
}
scaleElement("#cele_left").scale(979,687,1988,newArr[0]);
scaleElement("#cele_right").scale(979,687,1988,newArr[0]);
titleArr=Simpzoom(230,53,1154,newArr[0]);
$("#celetitle").css({"width":titleArr[0],"height":titleArr[1]});
$("#chinatitle").css({"width":titleArr[0],"height":titleArr[1]});
$("#overseastitle").css({"width":titleArr[0],"height":titleArr[1]});
待续。。
等比缩放
时间： 2024-08-09 15:13:15