Jquery animation-6. Create an image browser with mouse and keyboard Guidance

The jquery animation effect we will introduce today is that when you move the mouse or press the left and right keys on the keyboard, the image in the image corridor turns in the corresponding direction.

Let's take a look at it. The demo is provided at the end of the tutorial. You can download it.

The first task is to create HTML text.

<div id="proximity">                                                                                                    </div>

The content is simply a DIV, which contains 12 images. Next, add CSS.

<style type="text/css">    /* base classes (scripting disabled) */    #proximity    {        width: 960px;        margin: auto;        border: 1px solid #000;        -moz-border-radius: 8px;        -webkit-border-radius: 8px;        border-radius: 8px;    }    #proximity img    {        border: 1px solid #000;    }    /* scripting enabled classes */    #proximity.slider    {        width: 650px;        height: 250px;        position: relative;        overflow: hidden;    }    .slider #scroller    {        position: absolute;        left: 0;        top: 0;    }    .slider #scroller img    {        display: block;        width: 150px;        height: 150px;        margin: 50px 0 0 50px;        float: left;        color: #fff;        background-color: #000;    }    .slider #scroller img:first-child    {        margin-left: 0;    }    #message    {        width: 100%;        height: 30px;        padding-top: 10px;        margin: 0;        -moz-border-radius: 0 0 8px 8px;        -webkit-border-bottom-radius: 8px;        -webkit-border-bottom-right-radius: 8px;        border-radius: 0 0 8px 8px;        position: absolute;        bottom: 0;        left: 0;        background-color: #000;        color: #fff;        text-align: center;        font: 18px "Nimbus Sans L" , "Helvetica Neue" , "Franklin Gothic Medium" , Sans-serif;    }</style>

CSS is also very simple. Border-radius is a newly added attribute of css3. It can achieve the rounded corner effect for the border. You can check related APIs online.

HTML and CSS are available, and JavaScript code is worse now. First, we define some JS objects that we need to use.

// Obtain the total container object var prox =$ ('# proximity '), // create a new container object scroller =$ ('<div> </div>', {ID: 'scroler'}) for the image '}), // The cursor prompt message is pointertext = 'Use your pointer to scroll, moving to the edge scrolls faster! ', // Keyboard prompt message keyboardmessage = "Use your arrow keys to scroll the images! ", // Prompt information container. By default, the keyboard prompt message =$ (" <p> </P> ", {ID:" message ", text: keyboardmessage}) is displayed }); // Add the newly created image container object scroroller to prox to include the image. // Add the prompt text to prox at the same time. addclass ('slider '). wrapinner (scroller ). append (Message); // calculate the half width of prox, and store the variable middlevar middle = prox. width ()/2; // obtain the newly added scroller object scroller =$ ('# scroler'); // calculate the width of scroller, the calculation rule is that the width of all images plus his margin-leftscroller.width (function () {var Total = 0; scroller. children (). each (function (I, Val) {var El = $ (this); Total = total + (El. outerwidth () + parseint(el.css ('marginleft');}); Return total;}) // sets the image center to .css ('left', '-' + (scroller. width ()/2-middle) + "PX ");

Next, define the Image Moving function goanim ().

// Define the Image Moving function goanim (e) {// obtain the offset position of prox var offset = prox. offset (), // the x-axis coordinate of the mouse minus the left offset of prox minus half of the width of prox resetoffset = E. pagex-offset. left-middle, normalizedduration = (resetoffset> 0 )? Resetoffset:-resetoffset, // sets the animation time. The closer the mouse is to the middle of prox, the slower the image runs. // The closer the mouse is to both sides of prox, faster image running duration = (middle-normalizedduration) * 50; scroller. stop (). animate ({left: (resetoffset <0 )? 0:-(scroller. Width ()-prox. Width ()}, duration, 'linear ');}

Goanim () calculates the mouse position to determine whether the image should slide left or right, and calculates the Sliding Speed of the image. To help you better understand the objects resetoffset, E. pagex, offset. Left, and middle, I drew the following simplified diagram, hoping to help you.

The next step is to set the mouse movement and keyboard-related event methods.

// Set the mouse to enter the event prox. mouseenter (function (e) {// The text message is displayed gradually. text (pointertext ). delay( 1000 ). fadeout ('low'); // run the moving method goanim (E); // set the mouse moving event prox. mousemove (function (event) {// run the moving method goanim (event) ;}); // sets the mouse removal event prox. mouseleave (function () {// move the mouse out of the animation to disappear scroller. stop (); // The Event prox. unbind ('mousemove ');}); // sets the keyboard event $ (document ). keydown (function (e) {// determines whether to press the Left or Right key of the keyboard if (E. keycode = 37 | E. keycode = = 39) {// The message indicating that the file is gradually hidden. fadeout ('low'); // If (! Scroller. is (': animated') {// sets the animation effect. After 6 seconds, the picture is moved to the leftmost or rightmost position. // you can move the picture to the leftmost position by pressing the left button, right-click to move to the rightmost // The leftmost is achieved through left: 0, and the rightmost is achieved through left:-(scroller. width ()-prox. width () scroller. stop (). animate ({left: (E. keycode = 37 )? 0:-(scroller. width ()-prox. width () }, 6000, 'linear ') ;}} // The keyboard pops up and ends the animation. keyup (function () {scroller. stop ();});

I have many comments and want to help you understand the code. If you are interested, you can download the demo to view the actual effect.

Demo: jquery.animate.proximity.rar