jquery Pan.js Proportional Panning Example

Try moving your mouse over the image above. Notice how you can control how the image pans by moving your mouse to the left and right edges. By setting the mouseControl option to 'edge', panning will be initiated when the user moves their mouse to the image border.

When the mouse is not over the image it will automatically pan horizontally; this behaviour is controlled by the autoSpeedX option.

<style type="text/css">
    #container {
        position: relative;
        width: 850px;
        height: 494px;
        border: 1px #4444ff solid;
        overflow: hidden;
    }

    #content {
        position: relative;
        width: 1692px;
        height: 494px;
        background-image: url('../img/blueprint.png');
    }
</style>

<div id="container">
    <div id="content"></div>
</div>

<script type="text/javascript">
    $('#container').pan({
        mouseControl: 'edge',
        mouseSpeed: 15,
        autoSpeedX: 2
    });
</script>