A simple mouse hover position detection effect that controls horizontal image movement.

Add-ons

2026-08-03 13:01 3 次浏览 • 0 次下载 37.3KB

A simple mouse hover position detection effect that controls horizontal image movement.

Plugin Description: Handwritten native JavaScript implementation with no jQuery dependency. Easy to use, with detailed instructions.

Usage

Reference

<link rel="stylesheet" href="css/bgMove.css">
<script src="js/bgMove.js"></script>

CSS

#move {
    background: url(images/bg1.jpg);
}
// Sets the background image

html

<div id="move">
        <div id="moveL"></div>
        <div id="moveR"></div>
</div>

Initialization

<script>
        bgMove({
            jump : 15,  // Movement speed. Optional; can be omitted. Defaults to 10.
            bgImgurl : "images/bg1.jpg" // Background image path in the HTML, which is required.
        })
</script>

note:

moveL and moveR are positioned with z-index set to 1. If there are clickable elements on the page, their z-index must be greater than 1.
The background image must be wider than the screen for the effect to work properly.