gpt4 book ai didi

jQuery/JavaScript : setting z-index after event

转载 作者:太空宇宙 更新时间:2023-11-04 15:41:10 24 4
gpt4 key购买 nike

我正在显示一堆图像,我需要做的是淡出顶部的图像,然后将其移至堆栈底部并将其不透明度恢复为 1.0。除了更改包含图像的对象 (div) 上的 z-index 之外,一切正常。我已经绝对定位了 div,尽管我是动态创建它的,但不确定这是否会产生影响。这是我的代码 [注意:淡入和淡出的注释现在用于调试目的]:

// JavaScript Document

var Summary = {};

Summary.hasTemplate = true;
Summary.template = {

summaryID : 'pageName',
itemCount : 5,
speed : 2000,
pause : 2000,
imgDirectoryPath : 'css/images/summaryImages/',
imgPrefix : '26_01_010_###',
imgExtension : '.png',
imgCountStart : 1,
imgCountEnd : 5,
imgStep : 1,
imgSize : {width : 400, height : 400},
imgFiles : {},
containerPos : {x : 0, y : 0}
}


function buildSummary() {

var summaryCode = "<div id='summaryWrapper'>";

//check to see if the summary is running off a template or unique files
if (Summary.hasTemplate == true) {

//set a number to start our img count from (one less than the start number in the object)
var imgNum = Summary.template.imgCountStart-1;

//build an array of the img prefix components
var imgPrefixComponents = Summary.template.imgPrefix.split("_");

//check to see if there is more than one underscore, then build out the image prefix
var imgPrefix = "";
if (imgPrefixComponents.length < 2) {
imgPrefix = imgPrefixComponents[0] + "_";
} else {
for(var p=0; p<imgPrefixComponents.length; p++) {
if (p != imgPrefixComponents.length-1) {
imgPrefix += imgPrefixComponents[p] + "_";
}
}
}

var imgExtension = Summary.template.imgExtension;

//get the count of the leading zeroes (use length-1 in case the image name contains other underscores)
var zeroCount = imgPrefixComponents[imgPrefixComponents.length-1].match(/#/g).length;

//build out the image prefix
for(z=0; z<zeroCount; z++) {
imgPrefix += "0"
}

//loop through the image count
for (i=0; i<Summary.template.itemCount; i++) {

//increment the image number
imgNum++;

//start building the image wrapper
var imgWrapperCode = "<div class'summaryImg' pageID='" + Summary.template.summaryID + "' thisImg='summaryImg_" + imgNum + "' style='z-index:" + (100+imgNum) + "; position: absolute; top: 100; left: 100; width:" + Summary.template.imgSize.width +"; height: " + Summary.template.imgSize.width + ";'>";

//get the img directory path
var imgDirectoryPath = Summary.template.imgDirectoryPath;

//build the imgFilePath
var imgFilePath = imgDirectoryPath + imgPrefix + imgNum + imgExtension

imgWrapperCode += "<img src='" + imgFilePath + "'></div>";

summaryCode += imgWrapperCode;

Summary.template.imgFiles[i] = imgFilePath;

}

}

Summary.summaryCode = summaryCode;
}

function setUpSummaryFade() {

//check to see if we are working with a template or not
if (Summary.hasTemplate == true) {

//get an array of the image divs, the summaryID let's us target a page so we're not ligthing them all up at once
var imgDivs = $('div[pageID="' + Summary.template.summaryID + '"]');

//build an array of z-indexes
var zIndexes = new Array();
for (i=0; i<imgDivs.length; i++) {

var thisImgDiv = imgDivs[i];
var thisZIndex = $(thisImgDiv).css('z-index');
zIndexes.push(thisZIndex);
}

i = imgDivs.length;
setInterval(function() {
i--;
if (i > -1) {
fadeDivs(imgDivs[i], zIndexes, imgDivs);
} else {
i = imgDivs.length;
}

}, Summary.template.pause);
}
}

function fadeDivs(thisDiv, zIndexes, imgDivs) {

//$(thisDiv).fadeOut('slow');

//change it's z-index
var maxZIndex = zIndexes[zIndexes.length-1];
var minZIndex = zIndexes[0];

for(z=0; z<imgDivs.length; z++) {

var thisDiv = imgDivs[z];
var thisZIndex = $(thisDiv).css('z-index');

//EDITS: Works on the first element, but not on the others
console.log("Start z: " + $(thisDiv).css('z-index'));
if (thisZIndex == maxZIndex) {
$(thisDiv).css('z-index', minZIndex);
} else {
$(thisDiv).css('z-index', thisZIndex+1);
}
console.log("End z: " + $(thisDiv).css('z-index'));
}

//bring it back to life
//$(thisDiv).fadeIn('fast');

最佳答案

这一行是错误的:

if (thisZIndex = maxZIndex) { 

总是返回真,你应该把它改成

if (thisZIndex == maxZIndex) { 

关于jQuery/JavaScript : setting z-index after event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12110346/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com