[英]Jquery plugin hover effect doesn't work
謝謝大家看看我的問題。
我正在嘗試編寫自己的jQuery圖片庫插件。 當頁面加載時,它工作正常,但是當我單擊“圖片”鏈接轉到“圖片”部分時,它不起作用。
鏈接在這里:
http://dharmeshpatel.net/core_reporting_api/flat-page.html
這是我所做的:
$(function() {
for (var i = 1; i <= 12; i++) {
var name = i + '.jpg';
if(i<10) name = '0' + name;
var img = $('<img class="galleryImage" src="pic/'+ name + '"/>');
$("#gallery").append(img);
};
var g = new PS.Gallery('gallery');
});
這是插件代碼:(在頁面刷新時它起作用,但是當我單擊菜單鏈接並轉到該div時,懸停效果不起作用。)
(function(ns){
ns.Gallery = function(id){
var gallery = $('#'+ id);
var images = gallery.find('.galleryImage');
var xPos = 50;
var yPos = 50;
var gWidth = gallery.width();
images.each(function(idx,el){
var img = $(el);
img.data('homeX',xPos);
img.data('homeY',yPos);
img.data('currentScale',1);
img.css({
'left':xPos,
'top':yPos,
'width':img.width() * 0.25
});
xPos += 95;
if(xPos > gWidth - 100){
xPos = 50;
yPos += 115;
}
img.hover(
function(event){
var target = $(event.target);
animateImage(target,500,target.data('homeX'),target.data('homeY'),2);
},function(event){
returnAllToNormal();
}
);
var returnAllToNormal = function(){
images.each(function(idx,el){
var img = $(el);
animateImage(img,500,img.data('homeX'),img.data('homeY'),1);
});
}
var animateImage = function(img,duration,left,top,scale){
img.stop();
img.css('textIndent',img.data('currentScale'));
img.animate({
'left':left,
'top':top,
'textIndent':scale
},
{
duration:duration,
step:function(now,fx){
if(fx.prop === 'textIndent'){
img.data('currentScale',now);
img.css('transform','scale(' + now + ')');
}else if(fx.prop === 'left'){
img.css('left',now);
}else if(fx.prop==='top'){
img.css('top',now);
}
}
});
}
});
}
}(window.PS = window.PS || {}));
我在正確的地方打電話給插件嗎?
當我將div#con的最高值更改為-2500px時,您的圖庫就壞了。 在進一步探索時,您已經知道您正在存儲單個圖像的當前x和y位置,這就是問題所在。
而不是存儲當前值,而是播放當前值。 下面是有問題的代碼:
var img = $(el);
img.data('homeX',xPos);
img.data('homeY',yPos);
img.data('currentScale',1);
img.css({
'left':xPos,
'top':yPos,
'width':img.width() * 0.25
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.