我在兩個月以前沒有接觸過html,css,jquery,javascript。今天我卻在這里分享一篇技術貼，可能在技術大牛面前我的文章漏洞百出，也請斧正。
可以看出來，無論是div+css布局還是jquery其實真的很簡單，只要不停的練習就會有很大進步。每天150行代碼，會幫助我們走的更遠。對於編程對於腳本語言，我們這樣的學生娃沒有和比人一樣初中，高中就開始研究，要想走在時代的前沿需要怎樣的努力和毅力，是我們一類人需要思考的方向。
下面解釋下焦點圖，焦點圖使用范圍非常廣，banner和animation很容易抓住用戶的眼球，所以做好這個也就是一個網頁一個app的關鍵之一。
焦點圖實現的方式很多種，可以是css的jjq的甚至其他框架的，jq最近很火這里以此舉例。
下面進一段html代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>橫向滑動的懸停焦點圖全代碼</title> <link href="css/slidepic8.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script> </head> <body> <div class="slideBox"> <ul> <li><img src="image/Lslide3.jpg" alt="" width="300" height="480"/></li> <li><img src="image/Lslide4.jpg" alt="" width="300" height="480"/></li> <li><img src="image/Lslide5.jpg" alt="" width="300" height="480"/></li> <li><img src="image/Lslide6.jpg" alt="" width="300" height="480"/></li> <li><img src="image/Lslide2.jpg" alt="" width="300" height="480"/></li> <li><img src="image/Lslide1.jpg" alt="" width="300" height="480"/></li> </ul> <div class="spanBox"> <span class="active">q</span> <span>a</span> <span>z</span> <span>w</span> <span>s</span> <span>x</span> </div> <div class="prev"><img src="image/left_arrow.jpg" width="15" height="50" alt=""/></div> <div class="next"><img src="image/right_arrow.jpg" width="15" height="50" alt=""/></div> </div> </body> </html>
上面是html代碼，代碼的結構比較簡單，這里解釋一下，ul標簽是要左右移動的，所以怎么設置position屬性？，然后span標簽是提供索引和下標控制符，綁定動畫的。prev和next類名的div標簽是提供左右按鈕，電機可以實現左右滑動。
下面附上css代碼：
@charset "utf-8"; /* CSS Document */ *{ padding:0px; border:0px; margin:0px; } ul { list-style:none; } .slideBox { margin:50px auto; width:300px; height:480px; box-shadow:2px 2px 10px #C38DD4; border-radius:20px; position:relative; overflow:hidden; } .slideBox ul { position:relative; width:2000px;} .slideBox ul li { float:left; width:300px; height:480px; position:relative; } .spanBox { position:absolute; width:300px; height:20px; bottom:10px; left:80px; } .spanBox span { width:18px; height:18px; margin-left:5px; background-color:rgba(201,178,207,1.00); float:left; line-height:16px; text-align:center; text-shadow:2px 2px 2px #C5EBF0; font-family:cabin-sketch; font-size:15px; } .slideBox .spanBox .active { background-color:rgba(155,83,244,0.79); border:solid 1px #BEEBEC; border-radius:4px; } .prev { position:absolute; left:0px; top:320px; float:left; border-left:solid 1px rgba(251,245,246,1.00); opacity:0.5; } .next { width:15px; height:50px; position:absolute; right:0px; top:320px; float:right; border-right:solid 1px rgba(245,237,237,1.00); opacity:0.5 }
我是鏈接的外部css文件，然后請注意一下各種屬性和值。電腦端的話，html是相當於文本結構常說的dom，解碼的時候配合css屬性進行渲染，具體的屬性請大家自己測試，在四種常用的瀏覽器測試一下css屬性，我這里就偷懶了沒有加上-webkit-，-moz-等等，大家如果需要用可以hack。
下面附上jquery代碼:
<script type="text/javascript"> $(document).ready(function(){ var slideBox = $(".slideBox"); var ul = slideBox.find("ul"); var oneWidth = slideBox.find("ul li").eq(0).width(); var number = slideBox.find(".spanBox span"); //注意分號 和逗號的用法 var timer = null; var sw = 0; //每個span綁定click事件，完成切換顏色和動畫，以及讀取參數值 number.on("click",function (){ $(this).addClass("active").siblings("span").removeClass("active"); sw=$(this).index(); ul.animate({ "right":oneWidth*sw, //ul標簽的動畫為向左移動； }); }); //左右按鈕的控制效果 $(".next").stop(true,true).click(function (){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); }); $(".prev").stop(true,true).click(function (){ sw--; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); }); //定時器的使用，自動開始 timer = setInterval(function (){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); },2000); //hover事件完成懸停和，左右圖標的動畫效果 slideBox.hover(function(){ $(".next,.prev").animate({ "opacity":1, },200); clearInterval(timer); },function(){ $(".next,.prev").animate({ "opacity":0.5, },500); timer = setInterval(function (){ sw++; if(sw==number.length){sw=0}; number.eq(sw).trigger("click"); },2000); }) }) </script>
在代碼中也分為幾個部分，讓大家清晰明了。其實很簡單就是幾個參數，幾個函數，整個過程就click事件，hover時間，animate方法，setInterval（）就可以輕松搞定。在網上看到很多朋友也有分享，后面我會附上很多的html5的新功能，還有w3c標准以及css3的各種新鮮玩意。大家一起交流學習，共同進步。
我是自學er,也沒有啥子技術，只是愛好，興趣使然，可以一步一步的走進去，發現web前端的更深層的東西，每天都在瞻仰大山，攀爬中，早晚有一天會登上高山，然后創造高山。