Use JavaScript to write the movement of the background picture based on the user's mouse

Do the front end in a VR company.

The first step into the front end is a gut instinct to create a better user experience, make the page more friendly, and, of course, take over the Web project at first or complete the graduation design.

A net book mall, although not big, but five zang all have the operation after all, so can not avoid many flaws, the project in .... I haven't seen it for a long time. Https://github.com/gitxiao5/html5/tree/master/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1.

This March only began to formally work, work for a half year, the front end has not been broken, and sometimes there are other things, this time to take over the Web project is not many, but the company's website has been updated over and over again, the revision of this, gradually enrich the content up, the function is getting better, but, But the use of scripting language is what I always want to control, this period to use the basic is a third-party library, even if all can be very flexible to use, but do not know what is happening at the bottom, so always like themselves, write an interaction, not what plug-ins, in the last week the company wanted to add news section and there is a list Doing it suddenly reminds me of what you see on other websites.

This is probably the case where the mouse click where the background will be moved to where, or underline the like, and then think of the carousel and so on, and so on is probably the way it is ...

1.2.3. Do not look back ...

HTML code:

<! DOCTYPE html>
　　
JS Code:
  <script type = "Text/javascript" >//1. Gets the parent element of the click Chunk Fast var newsguide = document.getelementsbyclassname (' news-guide ' ); 2. Get the collection of click chunks var newsli = document.getelementsbyclassname (' News-li ');   When we get a collection of click chunks, we use loops to add index values to each chunk, and to bind the events for (var i = 0;i<newsli.length;i++) {//Add index values to each chunk Newsli[i].index = i;   Define an animation timer VAR timer;   Defines a default index value, which is used to newslie=0 the back with Var;   This is also the key can not be set in CSS, I did not respond when the test//This is the background block Newsguide[0].style.backgroundpositionx = 0+ ' px '; Event bindings for each DOM Newsli[i].onclick = function () {//To determine the block index value that the current user clicked and the default index value to compare, if the user is a forward click if (This.index > NEWSL  IE) {//The index value of the chunk clicked by the user to the default index value Newslie = This.index; Give the animation event to the timer to manage the timer = Requestanimationframe (function fn () {///To determine if the background picture reaches the location where the user clicked if (parseint (newsguide[0].sty Le.backgroundpositionx) < newslie*72) {//Let the background picture go 5 pixels in each frame before Newsguide[0].style.backgroundpositionx = parseint (    Newsguide[0].style.backgroundpositionx) + 5 + ' px ';  Did not reach before always callback this animation step timer = Requestanimationframe (FN); }else{    If it arrives, then we release the animated cancelanimationframe (timer);   }  });  }else{//Otherwise the user clicks on the next chunk//in the current location to assign the user click the index value of the chunk to the default index variable Newslie = this.index; ... timer = requestanimationframe (function fn () {//Determines whether the background picture is back to the block position that the user clicked if (parseint (Newsguide[0].style.backgrou Ndpositionx) > newslie*72) {/... Newsguide[0].style.backgroundpositionx = parseint (newsguide[0].style.background   Positionx)-5 + ' px ';  ... timer = requestanimationframe (FN);  }else{//... cancelanimationframe (timer);  };   });      };  };};  </script>
　　
This plug-in uses the premise is before IE9 Oh, does not do the compatibility processing, the compatibility can use the settimeout () and so on function to handle,
For starters, two points are core, 1. Index assignment 2. Determine the user's thinking
If the great god please faint drifting over.
~~~~~~ "" ~~~~~
Use JavaScript to write the movement of the background picture based on the user's mouse