標籤：blog doctype 友好 css 定時器 並且 添加 class body
在一家VR公司做前端。
起初進入前端就是一種內心的直覺，創造更好的使用者體驗，讓頁面更加友好，當然最起初接手web項目還是為了完成畢業設計。
一個網書商城，雖然不大，但五髒都有畢竟開刀所以避免不了很多瑕疵，項目在....待我驗證下好久沒去看了！https://github.com/gitxiao5/html5/tree/master/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1。
今年三月份才開始正式的工作，工作了大半年了，前端一直都沒有斷過，即時有時還有其他的事情，這段時間來接手的web項目不多，但是公司的網站更新了一遍又一遍，改版了該，逐漸內容充實了起來，功能越來越得到完善，但是，但是指令碼語言的使用是我一直想要去駕馭的，這期間來用的基本都是第三方庫，即便都能很靈活的運用，但是不知曉底層發生了什麼，所以一直就像自己，親自寫一個互動，不用什麼的外掛程式，在上周公司想添加新聞板塊並且是有項目列表的，做著做著就突然想到了在別的網站看到的樣子。
大概是這樣的按一下滑鼠哪裡哪裡的背景就會移動到哪裡，或則底線之類的，後來又想到了輪播什麼的等大概都是這個樣子......
1.2.3.怎麼做別回頭。。。
HTML代碼：
<!DOCTYPE html><html lang = ‘en‘> <head> <meta charset = "utf-8"></meta> <title>javascrpt</title> <style> *{ padding:0px;margin:0px; } .news-guide{ width:216px;height:30px;background-image:url(‘./1.png‘);background-repeat:no-repeat;background-size:72px 30px;/*background-position-x:0px;*/background-color:yellow; } .news-guide ul{ padding:0px;position:relative;width:100%;height:100%;/*background-color:red;*/ } div.news-guide li.news-li{ float:left;display:inline-block;width:72px;height:30px;/*background-color:skyblue;*/ } </style> </head> <body> <div class = "news-guide"> <ul> <li class = "news-li"></li><li class = "news-li"></li><li class = "news-li"></li> </ul> </div> </body></html>
JS代碼：
<script type = "text/javascript"> //1.獲得單擊區塊的父元素快 var newsguide = document.getElementsByClassName(‘news-guide‘); //2.獲得單擊區塊的集合 var newsli = document.getElementsByClassName(‘news-li‘); //獲得單擊區塊的集合時，我們利用迴圈把各個區塊添加索引值，並且進行事件的綁定 for(var i = 0;i<newsli.length;i++){ //給每個區塊添加索引值 newsli[i].index = i; //定義一個動畫定時器 var timer; //定義一個預設索引值，給後面用 var newslie=0; //這點也關鍵不能在css中設定，我在試的時候沒反應 //這個就是背景區塊 newsguide[0].style.backgroundPositionX = 0+‘px‘; //進行每個dom的事件綁定 newsli[i].onclick = function(){ //判斷目前使用者所單擊的區塊索引值和預設索引值進行比較，假若是使用者是向前單擊的 if(this.index > newslie){ //把使用者單擊的區塊的索引值給預設索引值 newslie = this.index; //將動畫事件交給timer來管理 timer = requestAnimationFrame(function fn(){ //判斷背景圖片是否到達使用者單擊的位置 if(parseInt(newsguide[0].style.backgroundPositionX) < newslie*72){ //讓背景圖片在每一幀先前進5個像素newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) + 5 + ‘px‘; //沒達到之前一直回調這個動畫步驟timer = requestAnimationFrame(fn); }else{ //倘若到達了，那麼我們就釋放這個動畫 cancelAnimationFrame(timer); } }); }else{ //否則使用者就是在當前位置單擊後面的區塊 //把使用者單擊區塊的索引值賦予預設索引變數 newslie = this.index; //... timer = requestAnimationFrame(function fn(){ //判斷背景圖片是否後退到使用者單擊的區塊位置 if(parseInt(newsguide[0].style.backgroundPositionX) > newslie*72){ //... newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) - 5 + ‘px‘; //...timer = requestAnimationFrame(fn); }else{ //... cancelAnimationFrame(timer); }; }); }; };}; </script>
這個外掛程式使用的前提是在IE9之前哦，沒有做相容處理，相容的話可以用Settimeout（）等函數進行處理，
對於新手來說上面有兩點是核心的，1.索引的賦值2.判斷使用者的思路
若是大神請淡淡飄過。
~~~~~~》《~~~~~
使用javascript編寫根據使用者滑鼠控制背景圖片的移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
