我想修改我当前的脚本,以便当您单击图像时会出现一个新的(灯箱)弹出窗口,并在其中播放特定的动画。目前我有这个功能,但动画需要分成不同的部分,并拥有自己的动画链接。
点击左侧的三角形后,我想加载一个不同的动画但不确定动画的页面。
请参阅代码打击(对于大块代码抱歉)
// ------------------------------------------------------------------------------------------------------------------------------
// 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";
}
}
}
}
答案 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()