我想做一个全屏背景的网站。其思想是,一个图像序列正在播放,跟随鼠标位置(动画页面开始的左侧,动画页面结束的右侧)。所以,当你移动你的鼠标左右,图像序列是向前和向后播放,就像一个时间线。
我试着用HTML中的区域映射来构建它,只是我必须创建240张地图,但是坐标变得混乱了(全屏/浏览器)。我知道在jquery中使用它会容易得多,但我不知道如何开始。
有人能帮我开始吗?提前感谢!
发布于 2012-05-12 14:31:01
http://jsfiddle.net/DEB5C/
只需播放CSS,使其全屏。
HTML:
<div id="mmGallery_container">
<div id="mmGallery">
// images here
</div>
</div>jQuery:
$(window).load(function(){
// roXon mmGallery
MouseRelXpos = 0;
sumW = 0;
// auto-SET mmGallery_container WIDTH ()
$('#mmGallery img').each(function(){
sumW += $(this).width(); // collect all images widths
$('#mmGallery').width(sumW);//SET gallery WIDTH!
});
// Calculate 'compensation speed': width difference between the gallery container and the gallery
wDiff1 = $('#mmGallery_container').width();
wDiff2 = $('#mmGallery').width();
wDiff = (wDiff2/wDiff1)-1; //(-1 is for the already existant container width)
//#
$("#mmGallery_container").mousemove(function(e) {
MouseRelXpos = (e.pageX - this.offsetLeft); // = mouse pos. 'minus' offsetLeft of this element
});
var xSlider = $("#mmGallery"); // cache
var posX = 0;
setInterval(function(){
posX += (- MouseRelXpos - posX) / 14; // 14 = speed (higher val = slower animation)
xSlider.css({marginLeft: Math.round(posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
}, 10); // 10 = loop timeout
});https://stackoverflow.com/questions/10564577
复制相似问题