如何根据光标悬停移动背景？ [英] how to move background according to cursor hover?

问题描述

当光标悬停滑块时，背景也随着光标悬停而移动。（下面的链接）

这里是使用此效果链接到网站。
telemaruk

这种效果是什么称为？和如何实现这种效果？任何有用的链接plz
它是某种jquery插件或简单的css3效果。

解决方案

我刚刚创建了一个小提琴，向我展示我的意思，题。

  document.addEventListener（'mousemove'，function（event）{
 if（window.event）{// IE fix 
 event = window.event; 
} 
 
 //获取鼠标的X位置
 var mousex = event.clientX; 
 var header = document.getElementById（'header'）; 
 header.style.backgroundPosition = mousex / 3 +'px 0'; 
}，false）; 
  

至于解释这里发生了什么：

• 它在文档上绑定 mousemove 事件上的一个函数。


• 它使用 event.clientX 捕获当前的鼠标位置。


• 它更改元素 #header 以1/3的速度（ mousex / 3 ）。






立即检查： FIDDLE





如果你想要与你链接的网站完全相同，你应该有几个div，并将他们的背景位置移动到另一个速度。在这个例子中，它从你的鼠标的速度移动1/3。




when cursor hovers the slider, background also moves with cursor hover.(link below)

here is link to site using this effect. telemaruk

what is this effect called? and how to achieve this effect? any useful link plz it is some kind of jquery plugin or simple css3 effect. I'cant figure it out please help.

解决方案

I just created a Fiddle to show you what I meant with my comment on your question. You should be able to go further from there.

document.addEventListener('mousemove', function (event) {
    if (window.event) { // IE fix
        event = window.event;
    }

    // Grab the mouse's X-position.
    var mousex = event.clientX;
    var header = document.getElementById('header');
    header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);

As to explain what's happening here:

• It binds a function on the mousemove event on document.
• It grabs the current mouse position using event.clientX.
• It changes the background-position of element #header with 1/3rd of the speed (mousex/3).

Check it live: FIDDLE

If you want the exact same thing as that website you linked, you should have a few divs over each other, and move their background positions at another speed. In this example it moves 1/3 from the speed of your mouse.

这篇关于如何根据光标悬停移动背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！