图像平移效果 - 垂直 - 鼠标悬停答案

【问题标题】：Image Panning Effect - Vertical - Mouse Over图像平移效果 - 垂直 - 鼠标悬停
【发布时间】：2013-01-05 09:42:46
【问题描述】：

寻找可用于创建与in this example 相同的垂直“图像平移”/“鼠标悬停”效果的代码，用于以下WordPress themes full screen images

感谢您的回复。

谢谢

【问题讨论】：

【解决方案1】：

这是一种方法的一些伪代码。

css
.div{
width:200px;
height:200px;
overflow:hidden;
}

jQuery
$('#theimage').mousemove(function(event){
    $('#theimage').css('top', function(current){
        return current + event.pageY + offset; 
        //offset is what sets the zero point in the center
        };
});

从中得出的结论应该是逻辑而不是代码本身。我还没有尝试过，我很确定可能仍然存在错误。

【讨论】：

【解决方案2】：

试试这个代码 div 有一个很大的 backgroundimage ，大于它的宽度和高度

// HTML

<div id="pageBg">
</div>

//CSS

#pageBg {
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 768px;
    min-width: 1024px;
    overflow: hidden;
    position: fixed;   
    top: 0;
    width: 100%;
}

// Javascript

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosY = (e.pageY/$(window).width())*100;
      $('#pageBg').css('background-position-y', mousePosY +'%');
   }); 
});

【讨论】：