各位大侠帮我看一下这个JS的高度应该怎么改,现出来的图片的宽度都是4百多像素,高度3百多像素,好像他的高度是相对的,我现在想把高度改成600像素左右,宽度可以设就不设,代码下如,希望大侠们指教一下。
js代码如下<script type="text/javascript">var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 1);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx     = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
   (img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left     = '-1000px';
cont.appendChild(flx);
return flx;
}

解决方案 »

  1.   

    接上代码
    /* //////////// ==== ImageFlow Constructor ==== //////////// */
    function ImageFlow(oCont, size, zoom, border) {
    this.diapos     = [];
    this.scr        = false;
    this.size       = size;
    this.zoom       = zoom;
    this.bdw        = border;
    this.oCont      = oCont;
    this.oc         = document.getElementById(oCont);
    this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
    this.text       = getElementsByClass(this.oc,   'div', 'text');
    this.legend     = getElementsByClass(this.text, 'div', 'legend');
    this.bar        = getElementsByClass(this.oc,   'img', 'bar');
    this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
    this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
    this.bw         = this.bar.width;
    this.alw        = this.arL.width - 5;
    this.arw        = this.arR.width - 5;
    this.bar.parent = this.oc.parent  = this;
    this.arL.parent = this.arR.parent = this;
    this.view       = this.back       = -1;
    this.resize();
    this.oc.onselectstart = function () { return false; }
    /* ---- create images ---- */
    var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
    this.NF = img.length;
    for (var i = 0, o; o = img[i]; i++) {
    this.diapos[i] = new Diapo(this, i,
    o.rel,

    o.innerHTML || o.rel,
    o.href || '',
    o.target || '_self'
    );
    }
    /* ==== add mouse wheel events ==== */
    if (window.addEventListener)
    this.oc.addEventListener('DOMMouseScroll', function(e) {
    this.parent.scroll(-e.detail);
    }, false);
    else this.oc.onmousewheel = function () {
    this.parent.scroll(event.wheelDelta);
    }
    /* ==== scrollbar drag N drop ==== */
    this.bar.onmousedown = function (e) {
    if (!e) e = window.event;
    var scl = e.screenX - this.offsetLeft;
    var self = this.parent;
    /* ---- move bar ---- */
    this.parent.oc.onmousemove = function (e) {
    if (!e) e = window.event;
    self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
    self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
    if (self.view != self.back) self.calc();
    return false;
    }
    /* ---- release scrollbar ---- */
    this.parent.oc.onmouseup = function (e) {
    self.oc.onmousemove = null;
    return false;
    }
    return false;
    }
    /* ==== right arrow ==== */
    this.arR.onclick = this.arR.ondblclick = function () {
    if (this.parent.view < this.parent.NF - 1)
    this.parent.calc(1);
    }
    /* ==== Left arrow ==== */
    this.arL.onclick = this.arL.ondblclick = function () {
    if (this.parent.view > 0)
    this.parent.calc(-1);
    }
    }
    /* //////////// ==== ImageFlow prototype ==== //////////// */
    ImageFlow.prototype = {
    /* ==== targets ==== */
    calc : function (inc) {
    if (inc) this.view += inc;
    var tw = 0;
    var lw = 0;
    var o = this.diapos[this.view];
    if (o && o.loaded) {
    /* ---- reset ---- */
    var ob = this.diapos[this.back];
    if (ob && ob != o) {
    ob.img.className = 'diapo';
    ob.z1 = 1;
    }
    /* ---- update legend ---- */

    this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
    /* ---- update hyperlink ---- */
    if (o.url) {
    o.img.className = 'diapo link';
    window.status = 'hyperlink: ' + o.url;
    } else {
    o.img.className = 'diapo';
    window.status = '';
    }
    /* ---- calculate target sizes & positions ---- */
    o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
    var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
    var x = x0 + o.w1 + this.bdw;
    for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
    if (o.loaded) {
    o.x1 = x;
    o.w1 = (this.ht / o.r) * this.size;
    x   += o.w1 + this.bdw;
    tw  += o.w1 + this.bdw;
    }
    }
    x = x0 - this.bdw;
    for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
    if (o.loaded) {
    o.w1 = (this.ht / o.r) * this.size;
    o.x1 = x - o.w1;
    x   -= o.w1 + this.bdw;
    tw  += o.w1 + this.bdw;
    lw  += o.w1 + this.bdw;
    }
    }
    /* ---- move scrollbar ---- */
    if (!this.scr && tw) {
    var r = (this.ws - this.alw - this.arw - this.bw) / tw;
    this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
    }
    /* ---- save preview view ---- */
    this.back = this.view;
    }
    },
    /* ==== mousewheel scrolling ==== */
    scroll : function (sc) {
    if (sc < 0) {
    if (this.view < this.NF - 1) this.calc(1);
    } else {
    if (this.view > 0) this.calc(-1);
    }
    },
    /* ==== resize  ==== */
    resize : function () {
    this.wh = this.oc.clientWidth;
    this.ht = this.oc.clientHeight;
    this.ws = this.scrollbar.offsetWidth;
    this.calc();
    this.run(true);
    },
    /* ==== move all images  ==== */
    run : function (res) {
    var i = this.NF;
    while (i--) this.diapos[i].move(res);
    }
    }
    /* //////////// ==== Diapo Constructor ==== //////////// */
    Diapo = function (parent, N, src,  text, url, target) {
    this.parent        = parent;
    this.loaded        = false;

    this.text          = text;
    this.url           = url;
    this.target        = target;
    this.N             = N;
    this.img           = document.createElement('img');
    this.img.src       = src;
    this.img.parent    = this;
    this.img.className = 'diapo';
    this.x0            = this.parent.oc.clientWidth;
    this.x1            = this.x0;
    this.w0            = 0;
    this.w1            = 0;
    this.z1            = 1;
    this.img.parent    = this;
    this.img.onclick   = function() { this.parent.click(); }
    this.parent.oc.appendChild(this.img);
    /* ---- display external link ---- */
    if (url) {
    this.img.onmouseover = function () { this.className = 'diapo link'; }
    this.img.onmouseout  = function () { this.className = 'diapo'; }
    }
    }
    /* //////////// ==== Diapo prototype ==== //////////// */
    Diapo.prototype = {
    /* ==== HTML rendering ==== */
    move : function (res) {
    if (this.loaded) {
    var sx = this.x1 - this.x0;
    var sw = this.w1 - this.w0;
    if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
    /* ---- paint only when moving ---- */
    this.x0 += sx * .1;
    this.w0 += sw * .1;
    if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
    /* ---- paint only visible images ---- */
    this.visible = true;
    var o = this.img.style;
    var h = this.w0 * this.r;
    /* ---- diapo ---- */
    o.left   = Math.round(this.x0) + 'px';
    o.bottom = Math.floor(this.parent.ht * .25) + 'px';
    o.width  = Math.round(this.w0) + 'px';
    o.height = Math.round(h) + 'px';
    /* ---- reflexion ---- */
    if (this.flx) {
    var o = this.flx.style;
    o.left   = Math.round(this.x0) + 'px';
    o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
    o.width  = Math.round(this.w0) + 'px';
    o.height = Math.round(h) + 'px';
    }
    } else {
    /* ---- disable invisible images ---- */
    if (this.visible) {
    this.visible = false;
    this.img.style.width = '0px';
    if (this.flx) this.flx.style.width = '0px';
    }
    }
    }
    } else {
    /* ==== image onload ==== */
    if (this.img.complete && this.img.width) {
    /* ---- get size image ---- */
    this.iw     = this.img.width;
    this.ih     = this.img.height;
    this.r      = this.ih / this.iw;
    this.loaded = true;
    /* ---- create reflexion ---- */
    this.flx    = createReflexion(this.parent.oc, this.img);
    if (this.parent.view < 0) this.parent.view = this.N;
    this.parent.calc();
    }
    }
    },
    /* ==== diapo onclick ==== */
    click : function () {
    if (this.parent.view == this.N) {
    /* ---- click on zoomed diapo ---- */
    if (this.url) {
    /* ---- open hyperlink ---- */
    window.open(this.url, this.target);
    } else {
    /* ---- zoom in/out ---- */
    this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
    this.parent.calc();
    }
    } else {
    /* ---- select diapo ---- */
    this.parent.view = this.N;
    this.parent.calc();
    }
    return false;
    }
    }
    /* //////////// ==== public methods ==== //////////// */
    return {
    /* ==== initialize script ==== */
    create : function (div, size, zoom, border) {
    /* ---- instanciate imageFlow ---- */
    var load = function () {
    var loaded = false;
    var i = instances.length;
    while (i--) if (instances[i].oCont == div) loaded = true;
    if (!loaded) {
    /* ---- push new imageFlow instance ---- */
    instances.push(
    new ImageFlow(div, size, zoom, border)
    );
    /* ---- init script (once) ---- */
    if (!imf.initialized) {
    imf.initialized = true;
    /* ---- window resize event ---- */
    addEvent(window, 'resize', function () {
    var i = instances.length;
    while (i--) instances[i].resize();
    });
    /* ---- stop drag N drop ---- */
    addEvent(document.getElementById(div), 'mouseout', function (e) {
    if (!e) e = window.event;
    var tg = e.relatedTarget || e.toElement;
    if (tg && tg.tagName == 'HTML') {
    var i = instances.length;
    while (i--) instances[i].oc.onmousemove = null;
    }
    return false;
    });
    /* ---- set interval loop ---- */
    setInterval(function () {
    var i = instances.length;
    while (i--) instances[i].run();
    }, 16);
    }
    }
    }
    /* ---- window onload event ---- */
    addEvent(window, 'load', function () { load(); });
    }
    }
    }();/* ==== create imageFlow ==== */
    //          div ID    , size, zoom, border
    imf.create("imageFlow", 0.1, -1, 5);</script>
      

  2.   

    已解决:将这个改成9,o.w1 = Math.min(o.iw, this.wh * .9) * o.z1;/*设定图片的比例*/