[英]Rollover images when mouseover
我试图做一个脚本,将鼠标悬停在一组五个不同的图像上。 类似于fb画廊。
这是我的尝试:
<script type="text/javascript">
$(document).ready(function(){
$(".collectionThumb").mouseenter(function(){
var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
/*
rotator :=
Object {1: Array[5], 2: Array[5]}
1: Array[5]
0: "/images/picture_gallery/779cfee29cdd-img-5529.thumb.jpg"
1: "/images/picture_gallery/43f561c548e6-img-5522.thumb.jpg"
2: "/images/picture_gallery/28c56302e920-img-5527.thumb.jpg"
3: "/images/picture_gallery/1a57472c9edf-img-5523.thumb.jpg"
4: "/images/picture_gallery/0323ab8eb12c-img-5524.thumb.jpg"
length: 5
__proto__: Array[0]
2: Array[5]
0: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
1: "/images/picture_gallery/859ae8584caf-img-5541.thumb.jpg"
2: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
3: "/images/picture_gallery/1522b44b2de8-img-5546.thumb.jpg"
4: "/images/picture_gallery/ee1d7402c73f-img-5549.thumb.jpg"
length: 5
__proto__: Array[0]
__proto__: Object
*/
var collectionid = $(this).data('collectionid');
for (var i = 0; i < rotator[collectionid].length; i++) {
// get src for the next thumbnail to show
var nextThumb = rotator[collectionid][i];
replaceCollectionThumb(nextThumb, collectionid);
}
});
});
function replaceCollectionThumb(el, collectionid) {
setTimeout(function() { replaceThumb(el, collectionid); }, 1000);
}
function replaceThumb(el, collectionid) {
//console.log(el);
$(".collectionThumb").each(function(i, v){
if (collectionid == $(v).data('collectionid')) {
//console.log($(v).data('collectionid'));
var img = loadImage(el, 'title');
$(v).children('img').remove();
$(v).append(img.imgObj);
}
});
}
function loadImage(path, imgTitle, width, height) {
if (undefined == width) width = 'auto';
if (undefined == height) height = 'auto';
var imgWidth;
var imgHeight;
var img = new Image();
$(img).load(function() {
$(this).width(width).height(height);
imgWidth = $(this).width;
imgHeight = $(this).height;
});
img.src = path;
img.alt = imgTitle;
var obj = new Object();
obj.imgObj = img;
obj.width = imgWidth;
obj.height = imgHeight;
return obj;
}
</script>
我将寻找现有的解决方案,但是我想了解使它起作用所缺少的东西。
现在发生的事情是在所有超时发生之后,替换了图像,但图像本身相同。
我想知道超时回调何时结束,刷新图像,等待一秒钟后,对下一个执行相同操作,但是我发现我对它的工作原理有一个误解。
帮助/评论?
如果有人正在寻找类似的东西,这是我的解决方案:
<script type="text/javascript">
$(document).ready(function(){
var indx = 0, numberOfFeatures = 4;
var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
var currentCollection = 1;
var run = false;
function imageRotate(){
if (run) {
indx++;
if (indx > numberOfFeatures) { indx = 0; }
var nextThumb = rotator[currentCollection][indx];
var collectionSelector = 'collectionThumb-' + currentCollection;
$('#'+collectionSelector+' img').attr('src',nextThumb);
setTimeout( imageRotate , 800 );
}
}
$(".collectionThumb").mouseenter(function(){
currentCollection = $(this).data('collectionid');
run = true;
imageRotate();
});
$(".collectionThumb").mouseleave(function(){
run = false;
imageRotate();
});
});
</script>
由于过渡中的行为异常,我将其移至requestAnimationFrame方法。 这是我的最终解决方案:
<script type="text/javascript">
$(document).ready(function(){
var indx = 1;
var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
var currentCollection = 1;
var run = false;
var globalID;
var fps = 2;
function photoRollover(){
if (run) {
setTimeout(function() {
var numberOfFeatures = rotator[currentCollection].length - 1;
if (indx > numberOfFeatures) { indx = 0; }
var nextThumb = rotator[currentCollection][indx];
var collectionSelector = 'collectionThumb-' + currentCollection;
$('#'+collectionSelector+' img').attr('src',nextThumb);
indx++;
globalID = requestAnimationFrame(photoRollover);
}, 3000 / fps );
}
}
$(".collectionThumb").mouseenter(function(){
run = true;
currentCollection = $(this).data('collectionid');
var collectionSelector = 'collectionThumb-' + currentCollection;
var nextThumb = rotator[currentCollection][indx];
$('#'+collectionSelector+' img').attr('src',nextThumb);
indx++;
globalID = requestAnimationFrame(photoRollover);
});
$(".collectionThumb").mouseleave(function(){
run = false;
cancelAnimationFrame(globalID);
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.