訪問更改的DOM元素
[英]Accessing a changed DOM element
問題描述
有沒有辦法訪問JS更改的DOM元素？ 我有一個基於使用JS / JQ更改縮略圖而更改的圖像框。
我有第二個JavaScript，這是放大圖像的放大鏡。 但是，它只是放大原始src鏈接，div內的原始src，而不是更改的src鏈接。
在調試器中，我可以在div元素中看到圖像更改，但是放大鏡腳本看不到它。 似乎放大鏡腳本只是在訪問div元素的原始src。
兩種JS / JQ腳本都是由不同的人編寫的，我正在努力使它們很好地協同工作。
我是JS的新手，所以不確定是否可行。
這是要更改的HTML（圖庫JS更改了src元素）：
<img class="picture-slides-image" src="artifactImages/bowl_fragment_16134_04E.jpg" alt=""/ >
這是設置放大鏡的HTML中的JS：
<script>
$('.picture-slides-image').ClassyLoupe({
maxSize: 600,
size: 300,
minSize: 200,
loupeToggleSpeed: 'fast'
});
</script>
這是放大鏡的JS：
(function($) {
var id = 0;
jQuery.fn.ClassyLoupe = function(a) {
id++;
if (this.length > 1) {
return this.each(function() {
$(this).ClassyLoupe(a);
}), this;
}
var a = $.extend({
trigger: 'mouseenter',
shape: 'circle',
roundedCorners: 10,
loupeToggleSpeed: 'medium',
loupeToggleEasing: 'linear',
size: 200,
minSize: 150,
maxSize: 250,
glossy: true,
shadow: true,
resize: true,
sizeSnap: 10,
resizeAnimationSpeed: 'medium',
resizeAnimationEasing: 'easeOutBack',
canZoom: true,
zoomKey: 90,
zoom: 100,
minZoom: 50,
maxZoom: 200,
zoomSnap: 5,
zoomAnimationSpeed: 'medium',
zoomAnimationEasing: 'easeOutBack',
overlay: true,
overlayOpacity: 0.5,
overlayEffectSpeed: 'slow',
overlayEffectEasing: 'easeOutBack',
overlayClassName: ''
}, a || {}), j = jQuery(this), c = 'classyloupe-' + id, t = 'classyloupe_overlay-' + id, h = a.size, i, q = null, u = 0, v = 0, x = 0, y = 0, r = 0, s = 0, w = false, p = false, k = a.zoom, n = 0, o = 0, e, z = false;
return this.each(function() {
function A() {
var d = h - 2 * $('#' + c + ' .lglossy').css('marginTop'), e = h / 2, g = 0, f = 0;
a.shape === 'circle' ? f = g = e : a.shape === 'rounded' && (g = parseInt($('#' + c).css('border-top-width')), f = g = a.roundedCorners - g);
$('#' + c + ' .glossy').stop().animate({
width: d + 'px',
height: e + 'px',
'-webkit-border-top-left-radius': g + 'px',
'-webkit-border-top-right-radius': f + 'px',
'-moz-border-radius-topleft': g + 'px',
'-moz-border-radius-topright': f + 'px',
'border-top-left-radius': g + 'px',
'border-top-right-radius': f + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed
});
}
function B(d, e) {
if (w && a.canZoom) {
if (!(k + a.zoomSnap * d > a.maxZoom || k + a.zoomSnap * d < a.minZoom)) {
k += a.zoomSnap * d;
r += Math.round(x * a.zoomSnap / 100) * d;
s += Math.round(y * a.zoomSnap / 100) * d;
var g = e.pageY - this.offsetTop;
n = Math.round(r / u * (e.pageX - this.offsetLeft)) * -1 + h / 2;
o = Math.round(s / v * g) * -1 + h / 2;
$('#' + c).animate({
'background-position': n + 'px ' + o + 'px',
'background-size': r + 'px ' + s + 'px'
}, {
queue: false,
easing: a.zoomAnimationEasing,
duration: a.zoomAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
});
}
}
else if (a.resize && !w && (g = d * a.sizeSnap, !(h + g > a.maxSize || h + g < a.minSize))) {
h += g;
var f = 0, m = Math.round($('#' + c).offset().left - g), l = Math.round($('#' + c).offset().top - g);
n += g;
o += g;
$('#' + c).stop();
a.shape === 'circle' ? (f = h / 2, $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'-webkit-border-top-left-radius': f + 'px',
'-webkit-border-top-right-radius': f + 'px',
'-webkit-border-bottom-left-radius': f + 'px',
'-webkit-border-bottom-right-radius': f + 'px',
'-moz-border-radius-topleft': f + 'px',
'-moz-border-radius-topright': f + 'px',
'-moz-border-radius-bottomleft': f + 'px',
'-moz-border-radius-bottomright': f + 'px',
'border-top-left-radius': f + 'px',
'border-top-right-radius': f + 'px',
'border-bottom-left-radius': f + 'px',
'border-bottom-right-radius': f + 'px',
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
})) : a.shape === 'rounded' ? $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'-webkit-border-radius': a.roundedCorners,
'-moz-border-radius': a.roundedCorners,
'border-radius': a.roundedCorners,
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
}) : a.shape === 'square' && $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
});
a.glossy && A();
}
}
(function() {
j.is("a") ? (q = j.attr('href'), e = j.find('img')) : (j.is('img') || j.is('input[type="image"]')) && (q = j.attr('src'), e = j);
u = e.width();
v = e.height();
$('body').append('<div class="classyloupe" id="' + c + '"></div>');
var d = new Image;
d.onload = function() {
x = this.width;
y = this.height;
r = Math.round(x * k / 100);
s = Math.round(y * k / 100);
var d = h / 2;
$('#' + c).css({
width: h + 'px',
height: h + 'px',
'background-image': 'url(' + q + ')',
'background-size': r + 'px ' + s + 'px'
});
a.shape === 'circle' ? $('#' + c).css({
'-webkit-border-radius': d + 'px',
'-moz-border-radius': d + 'px',
'border-radius': d + 'px'
}) : a.shape === 'rounded' && $('#' + c).css({
'-webkit-border-radius': a.roundedCorners,
'-moz-border-radius': a.roundedCorners,
'border-radius': a.roundedCorners + 'px'
});
i = $('#' + c).outerWidth();
a.glossy && $('#' + c).append('<div class="lglossy"></div>');
a.overlay && ($('body').append("<div class='loverlay " + a.overlayClassName + "' id='" + t + "'></div>"), $('#' + t).css({
top: e.offset().top + 'px',
left: e.offset().left + 'px',
width: e.outerWidth() + 'px',
height: e.outerHeight() + 'px'
}));
a.shadow && $('#' + c).addClass('lshadow');
};
d.src = q;
}(), (a.resize || a.canZoom) && !z && $.event.special.mousewheel && $('#' + c).bind('mousewheel', function(a, b) {
B(b, a);
return false;
}), e.bind(a.trigger, function(d) {
p ? ($('#' + c).fadeOut(a.loupeToggleSpeed, a.loupeToggleEasing), p = false, a.overlay && $('#' + t).fadeOut(a.overlayEffectSpeed, a.overlayEffectEasing)) : ($('#' + c).fadeIn(a.loupeToggleSpeed, a.loupeToggleEasing), p = true, a.overlay && $('#' + t).fadeTo(a.overlayEffectSpeed, a.overlayOpacity, a.overlayEffectEasing), A());
if (d.type === 'click') {
return d.preventDefault ? d.preventDefault() : d.returnValue = false, false;
}
}), $('#' + c).bind('click', function() {
e.trigger('click');
}), $(document).bind('mousemove', function(d) {
if (!p) {
return true;
}
var j = parseInt(e.css('border-left-width')) + parseInt(e.css('padding-left')),
g = parseInt(e.css('border-top-width')) + parseInt(e.css('padding-top')),
f = parseInt(e.css('border-right-width')) + parseInt(e.css('padding-right')),
m = parseInt(e.css('border-bottom-width')) + parseInt(e.css('padding-bottom')),
l = d.pageX - e.offset().left - j,
k = d.pageY - e.offset().top - g,
q = Math.round(d.pageX - i / 2),
d = Math.round(d.pageY - i / 2);
n = Math.round(r / u * l) * -1 + h / 2;
o = Math.round(s / v * k) * -1 + h / 2;
$('#' + c).css({
'background-position': n + 'px ' + o + 'px'
});
$('#' + c).css({
left: q + 'px',
top: d + 'px'
});
if (l < -j || k < -g || l > u + f || k > v + m) {
$('#' + c).fadeOut(a.loupeToggleSpeed), p = false, a.overlay && $('#' + t).fadeOut(a.overlayEffectSpeed);
}
}), $(document).keyup(function(event) {
if (event.which == a.zoomKey && p) {
return w = false, event.preventDefault ? event.preventDefault() : event.returnValue = false, false;
}
}).keydown(function(event) {
if (event.which == a.zoomKey && p) {
return w = true, event.preventDefault ? event.preventDefault() : event.returnValue = false, false;
}
}));
});
};
})(jQuery);
這是圖庫的JS：
jQuery.PictureSlides = function () {
var useMSFilter = false,
slideshows = [],
set = function (settings) {
slideshows.push(settings);
},
init = function () {
var counter = 0;
$(".picture-slides-container").each(function () {
var elm = $(this),
// Element references
settings = slideshows[counter++],
mainImage = elm.find("." + settings.mainImageClass),
mainImageFailedToLoad = elm.find("." + settings.mainImageFailedToLoadClass),
imageLink = elm.find("." + settings.imageLinkClass),
fadeContainer = elm.find("." + settings.fadeContainerClass),
imageTextContainer = elm.find("." + settings.imageTextContainerClass),
previousLink = elm.find("." + settings.previousLinkClass),
nextLink = elm.find("." + settings.nextLinkClass),
imageCounter = elm.find("." + settings.imageCounterClass),
startSlideShowLink = elm.find("." + settings.startSlideShowClass),
stopSlideShowLink = elm.find("." + settings.stopSlideShowClass),
thumbnailContainer = elm.find("." + settings.thumbnailContainerClass),
thumbnailEvent = settings.thumbnailActivationEvent,
thumbnailLinks,
dimBackgroundOverlay = $("." + settings.dimBackgroundOverlayClass),
// General image settings
usePreloading = settings.usePreloading,
useAltAsTooltip = settings.useAltAsTooltip,
useTextAsTooltip = settings.useTextAsTooltip,
images = settings.images,
startIndex = (settings.startIndex > 0)? (settings.startIndex - 1) : settings.startIndex,
imageIndex = startIndex,
currentImageIndex = imageIndex,
startSlideShowFromBeginning = settings.startSlideShowFromBeginning,
dimBackgroundAtLoad = settings.dimBackgroundAtLoad,
// General fade settings
useFadingIn = settings.useFadingIn,
useFadingOut = settings.useFadingOut,
useFadeWhenNotSlideshow = settings.useFadeWhenNotSlideshow,
useFadeForSlideshow = settings.useFadeForSlideshow,
useDimBackgroundForSlideshow = settings.useDimBackgroundForSlideshow,
loopSlideshow = settings.loopSlideshow,
fadeTime = settings.fadeTime,
timeForSlideInSlideshow = settings.timeForSlideInSlideshow,
startSlideshowAtLoad = settings.startSlideshowAtLoad,
slideshowPlaying = false,
timer,
// Sets main image
setImage = function () {
// Set main image values
var imageItem = images[imageIndex];
mainImage.attr({
src : imageItem.image,
alt : imageItem.alt
});
// If the alt text should be used as the tooltip
if (useAltAsTooltip) {
mainImage.attr("title", imageItem.alt);
}
// If the image text should be used as the tooltip
if (useTextAsTooltip) {
mainImage.attr("title", imageItem.text);
}
// Set image text
if (imageTextContainer.length > 0) {
imageTextContainer.text(imageItem.text);
}
// Set image link
if (imageLink.length > 0) {
var url = imageItem.url;
if (typeof url !== "undefined" && url.length > 0) {
imageLink.attr("href", imageItem.url);
}
else {
imageLink.removeAttr("href");
}
}
// Set image counter values
if (imageCounter.length > 0) {
imageCounter.text((imageIndex + 1) + "/" + (images.length));
}
if (!loopSlideshow) {
// Enabling/disabling previous link
if (imageIndex === 0) {
previousLink.addClass("picture-slides-disabled");
}
else {
previousLink.removeClass("picture-slides-disabled");
}
// Enabling/disabling next link
if (imageIndex === (images.length - 1)) {
nextLink.addClass("picture-slides-disabled");
}
else {
nextLink.removeClass("picture-slides-disabled");
}
}
// Keeping a reference to the current image index
currentImageIndex = imageIndex;
// Adding/removing classes from thumbnail
if (thumbnailContainer[0]) {
thumbnailLinks.removeClass("picture-slides-selected-thumbnail");
$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
}
},
// Navigate to previous image
prev = function () {
if (imageIndex > 0 || loopSlideshow) {
if (imageIndex === 0) {
imageIndex = (images.length -1);
}
else {
imageIndex = --imageIndex;
}
if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
fadeContainer.stop();
fadeContainer.fadeTo(fadeTime, 0, function () {
setImage(imageIndex);
});
}
else {
if (useFadingIn && imageIndex !== currentImageIndex) {
fadeContainer.css("opacity", "0");
}
setImage(imageIndex);
}
}
},
// Navigate to next image
next = function (specifiedIndex) {
if (imageIndex < (images.length -1) || typeof specifiedIndex !== "undefined" || loopSlideshow) {
if (typeof specifiedIndex !== "undefined") {
imageIndex = specifiedIndex;
}
else if (imageIndex === (images.length-1)) {
imageIndex = 0;
}
else {
imageIndex = ++imageIndex;
}
if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
fadeContainer.stop();
fadeContainer.fadeTo(fadeTime, 0, function () {
setImage(imageIndex);
});
}
else {
if (useFadingIn && imageIndex !== currentImageIndex) {
fadeContainer.css("opacity", "0");
}
setImage(imageIndex);
}
}
else {
stopSlideshow();
}
},
// Start slideshow
startSlideshow = function () {
slideshowPlaying = true;
startSlideShowLink.hide();
stopSlideShowLink.show();
if (startSlideShowFromBeginning) {
next(0);
}
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
elm.addClass("picture-slides-dimmed-background");
dimBackgroundOverlay.show();
}
},
// Stop slideshow
stopSlideshow = function () {
clearTimeout(timer);
slideshowPlaying = false;
startSlideShowLink.show();
stopSlideShowLink.hide();
if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
elm.removeClass("picture-slides-dimmed-background");
dimBackgroundOverlay.hide();
}
};
// Fade in/show image when it has loaded
mainImage[0].onload = function () {
if (useFadingIn && (useFadeWhenNotSlideshow || slideshowPlaying)) {
fadeContainer.fadeTo(fadeTime, 1, function () {
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
});
}
else {
fadeContainer.css("opacity", "1");
fadeContainer.show();
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
}
mainImageFailedToLoad.hide();
};
mainImage[0].onerror = function () {
fadeContainer.css("opacity", "1");
mainImageFailedToLoad.show();
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
};
// Previous image click
previousLink.click(function (evt) {
prev();
return false;
});
// Next image click
nextLink.click(function (evt) {
next();
return false;
});
// Start slideshow click
startSlideShowLink.click(function () {
startSlideshow();
return false;
});
// Stop slideshow click
stopSlideShowLink.click(function () {
stopSlideshow();
return false;
});
// Shows navigation links and image counter
previousLink.show();
nextLink.show();
startSlideShowLink.show();
imageCounter.show();
// Stop slideshow click
stopSlideShowLink.click(function () {
stopSlideshow();
});
// Thumbnail references
if (thumbnailContainer[0]) {
thumbnailLinks = $(thumbnailContainer).find("a");
$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
for (var i=0, il=thumbnailLinks.length, thumbnailLink; i<il; i++) {
thumbnailLink = $(thumbnailLinks[i]);
thumbnailLink.data("linkIndex", i);
thumbnailLink.bind(thumbnailEvent, function (evt) {
next($(this).data("linkIndex"));
this.blur();
return false;
});
}
}
// Sets initial image
setImage();
// If play slideshow at load
if (startSlideshowAtLoad) {
startSlideshow();
}
if (dimBackgroundAtLoad) {
elm.addClass("picture-slides-dimmed-background");
dimBackgroundOverlay.show();
}
if (usePreloading) {
var imagePreLoadingContainer = $("<div />").appendTo(document.body).css("display", "none");
for (var j=0, jl=images.length, image; j<jl; j++) {
$('<img src="' + images[j].image + '" alt="" />').appendTo(imagePreLoadingContainer);
}
}
});
};
return {
set : set,
init : init
};
}();
$(document).ready(function () {
jQuery.PictureSlides.init();
});
1 個解決方案
解決方案1
0 2014-10-28 16:20:51
創建一個可以輕松調用的函數以應用經典的放大鏡插件：
function addLoupe()
{
$('.picture-slides-image').ClassyLoupe({
maxSize: 600,
size: 300,
minSize: 200,
loupeToggleSpeed: 'fast'
});
}
然后在jQuery.PictureSlides文件中找到setImage的部分，因為代碼中的注釋表明這將設置主圖像。 在函數的結尾，在結束}調用之前，函數創建了addLoupe 。 這應該在新圖像上重置經典的放大鏡。
----編輯在PictureSlides代碼中進行挖掘我看到有一個選項可以設置thumbnailActivationEvent 。 當我遵循它在插件中設置/使用的位置時，我發現它的綁定位置。 如果此時使用放大鏡，則應該出現新的大圖像，並具有綁定在picture-slides-image上的新類。
嘗試：
thumbnailLink.bind(thumbnailEvent, function (evt) {
next($(this).data("linkIndex"));
this.blur();
addLoupe(); // reset your loupe settings here.
return false;
});
如果那行不通，那么我什么都沒有。
在VueJS中訪問DOM元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.