JQuery从一个JS文件链接到几个不同的页面

时间:2011-03-02 19:23:17

标签: javascript jquery

我想修改我当前的脚本,以便当您单击图像时会出现一个新的(灯箱)弹出窗口,并在其中播放特定的动画。目前我有这个功能,但动画需要分成不同的部分,并拥有自己的动画链接。

点击左侧的三角形后,我想加载一个不同的动画但不确定动画的页面。

请参阅代码打击(对于大块代码抱歉)

// ------------------------------------------------------------------------------------------------------------------------------
// getobjbyId()
function getobjbyId(id){var ns4 = (document.layers)?true:false; var ns6 = (document.getElementById)?true:false; var ie4 = (document.all)?true:false;if (ns4){return document.layers[id];}else if(ie4){return document.all[id];}else{return document.getElementById(id);}}

// pushin()
function pushin(the_array, the_data){var len_array=the_array.length;the_array[len_array]=the_data;return the_array.length;}

// JavaScript function to display flash movie format video on web page
function open_window_centered(the_url, the_width, the_height, the_scrollbar){
    if(window.screen){
        var w = parseInt(the_width) + 20; var h = parseInt(the_height) + 20; var x0 = (screen.availWidth - 10 - w)/2; var y0 = (screen.availHeight - 30 - h)/2;
        var str_scrollbar=""; if(the_scrollbar) str_scrollbar=", scrollbars=1";
        window.open(escape(the_url),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0+str_scrollbar);
    }
    return false;
}

// ------------------------------------------------------------------------------------------------------------------------------

function display_video(the_video_name, the_width, the_height, the_caption){
    if (window.screen){
        var w = parseInt(the_width) + 20;
        var h = parseInt(the_height) + 20;
        var x0 = (screen.availWidth - 10 - w)/2;
        var y0 = (screen.availHeight - 30 - h)/2;
        window.open('../_include/_play_video/play_video.html?'+escape(the_video_name)+'&'+the_width+'&'+the_height+'&'+escape(the_caption),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0);
    }
}


MM_preloadImages("../_images/background_top_dropdown_menu_left.gif", "../_images/background_top_dropdown_menu_right.gif");


// top dropdown menu
$(function(){
    var _top_menu_items = $("ul#top_menu>li");
    _top_menu_items.hover(
        function(){
            $(this).children("a").addClass("over");
            $(this).children("ul").addClass("over");
        },
        function(){
            $(this).children("a").removeClass("over");
            $(this).children("ul").removeClass("over");
        }
    );
});




// email protector
$(function(){

    var $emails = $(".email");
    var real_address;

    $emails.each(function(){
        real_address = $(this).text().replace(/\[\-at\-\]/, '@').replace(/\[\-dot\-\]/g, '.');
        $(this).html("<a href='mailto:" + real_address + "' target='_blank'>" + real_address +"</a>");            
    });

});




// lightbox script
// 2010-09-08

$(window).load(function(){

    if($(".link_how_we_work").length>0){

        $("body").append( get_html_lightbox() );

        var _lightbox = $("#lightbox"),
            _shadow = $("#lightbox #lightbox_shadow"),
            _stage = $("#lightbox #lightbox_stage");


        var _interval_DEFAULT = 3000,
            _duration_DEFAULT = 300;

        var _total,
            _frames = null,
            _index = -1,
            _go = true,
            _direction = 1,
            _timer = null,
            _interval = _interval_DEFAULT,
            _duration = _duration_DEFAULT;

        $.get("../_include/how_we_work.html", function(data){

            _stage.prepend($("<div/>").append(data).find("ul#images_how_we_work"));
            _stage.append($("<div/>").append(data).find("div#nav_how_we_work"));

            _frames = $("ul#images_how_we_work li");
            _total = _frames.length;

            $(".link_how_we_work").click(function(){_show();return false;});
            $("#lightbox #lightbox_button_close").click(function(){_hide();return false;});

            $("#nav_how_we_work #button_how_we_work_prev").click(function(){
                if(!$(this).hasClass("disabled")) _prev();
                return false;
            });
            $("#nav_how_we_work #button_how_we_work_next").click(function(){
                if(!$(this).hasClass("disabled")) _next();
                return false;
            });

        });

    }

    function _start(){
        _index = -1;
        for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0});

        _go= true;
        _play();
    }

    function _end(){
        _go= false;
        if(_timer){
            window.clearTimeout(_timer);
            _timer = null;
        }

        _index = -1;
        for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0});
    }


    function _move(){
        var _index_0 = _index;

        if(_direction>0){
            _index = _index_0 + 1;
            if(_index==_total) _index = 0;
        }else{
            if(_index_0>0) _index = _index_0 - 1;
        }

        if( _index !== -1 ) _interval = parseInt(_frames.eq(_index).attr("id").split(":")[1]);
        if(isNaN(_interval)) _interval = _interval_DEFAULT;
    }


    function _play(){

        var _index_0 = _index;
        _move();
        if(_index == -1) return false;

        if( _index>_index_0 )
            _frames.eq(_index)
                .css({'display':'block', 'opacity':0})
                .animate(
                    {opacity:1},
                    _duration,
                    "linear",
                    function(){
                        if(_index_0 !== -1) _frames.eq(_index_0).css({'display':'none', 'opacity':0});
                    }
                );

        if( _index<_index_0 )
            _frames.eq(_index).css({'display':'block', 'opacity':1});
            _frames.eq(_index_0)
                .css({'display':'block', 'opacity':1})
                .animate(
                    {opacity:0},
                    _duration,
                    "linear",
                    function(){
                        $(this).css({'display':'none', 'opacity':0});
                    }
                );

        if(_total>1 && _go){
            if(_timer) window.clearTimeout(_timer);
            _timer = setTimeout(_play, _interval);
        }

        if( _index == 0 ){
            $("#nav_how_we_work #button_how_we_work_prev").addClass("disabled");
        }else{
            $("#nav_how_we_work #button_how_we_work_prev").removeClass("disabled");
        }

        if( _index == _total-1 ){
            $("#nav_how_we_work #button_how_we_work_next").addClass("disabled");
        }else{
            $("#nav_how_we_work #button_how_we_work_next").removeClass("disabled");
        }


    }


    function _pause(){
        _go= false;
        if(_timer){
            window.clearTimeout(_timer);
            _timer = null;
        }
    }

    function _prev(){
        _direction = -1;
        _pause();
        _play();
    }

    function _next(){
        _direction = 1;
        _pause();
        _play();
    }



    function _show(){
        _resize();
        _lightbox.css({'visibility':'visible'});

        _shadow.animate(
            {opacity:0.5}, 200, "linear", 
            function(){
                _stage.css({'visibility':'visible'});
                _start();
            }
        );
    }


    function _hide(){
        _end();

        _lightbox.css({'visibility':'hidden'});
        _stage.css({'visibility':'hidden'});
        _shadow.css({opacity:0});
    }


    $(window).resize(function() {
        if( _lightbox.css('visibility') == 'visible' ){_resize();}
    });

    function _resize(){
        var _page_sizes = get_page_size(),
            _page_scrolls = get_page_scroll(),
            _top = ( (_page_sizes[3] - _stage.height())/3>20?(_page_sizes[3] - _stage.height())/3:20 ) + _page_scrolls[1];
        _lightbox.css({width:_page_sizes[0], height:_page_sizes[1]});
        _shadow.css({width:_page_sizes[0], height:_page_sizes[1]});
        _stage.css({top:_top});
    }


});



function get_html_lightbox(){

    var s="";

    s += "<div id='lightbox'>";

    s += "  <div id='lightbox_shadow'><!-- --></div>";
    s += "  <div id='lightbox_stage'>";
    s += "      <a id='lightbox_button_close' href='' onclick='return false;'>Close</a>";
    s += "  </div>";

    s += "</div>";

    return s;

}


/**
 * getPageSize() by quirksmode.com
 *
 * @return Array Return an array with page width, height and window width, height
 */
function get_page_size() {

    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {  
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        if(document.documentElement.clientWidth){
            windowWidth = document.documentElement.clientWidth; 
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }   
    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else { 
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){  
        pageWidth = xScroll;        
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight, yScroll);
    return arrayPageSize;
};

/**
 * getPageScroll() by quirksmode.com
 *
 * @return Array Return an array with x,y page scroll values.
 */
function get_page_scroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft; 
    }
    arrayPageScroll = new Array(xScroll,yScroll);
    return arrayPageScroll;
};









// ========================================================================================================================
// swap images 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
    ImgRestore_buttons();
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function ImgRestore_buttons() {
  var i,j,x,b,a=document.MM_sr;
  for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc&&(a[i].id!="image_exterior")&&(a[i].id!="image_floor_plan");i++){x.src=x.oSrc;}
}

// ========================================================================================================================
//v1.0
//Copyright 2006 Adobe Systems, Inc. All rights reserved.
function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?'); 
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '<object ';
  for (var i in objAttrs)
    str += i + '="' + objAttrs[i] + '" ';
  str += '>';
  for (var i in params)
    str += '<param name="' + i + '" value="' + params[i] + '" /> ';
  str += '<embed ';
  for (var i in embedAttrs)
    str += i + '="' + embedAttrs[i] + '" ';
  str += ' ></embed></object>';

  document.write(str);
}

function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    

    switch (currArg){   
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie": 
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblClick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "id":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}




function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}

1 个答案:

答案 0 :(得分:0)

$(function(){
    $('#body_left a').click(function() { // observe the triangle <a> 
        var page = this.id.split('_')[1] + ".html"; // prepare page step2.html
        $('#something').load(page,function() { //load the page into your place
            get_html_lightbox(); //open the lightbox
        });
        return false; //prevent <a> tag jumping around...
    });
});

加上......你正在使用大量不必要的代码;例如:灯箱,你可以找到jQuery的大量lightbox plugins版本,然后使用get_page_size(),你可以通过使用$(window).width()

来避免