Web front-end case-develop the QQ Space album display function

Knowledge Points: html/css layout thinking, floating/positioning detailed, large enterprise standards, Code performance optimization, JS mouse events, DOM operations.

HTML code:

<div id= "Main" > <ul> <li></li> <li></li> <li></li> <li> <li></li> <li>< IMG src= "images/s6.jpg" bigsrc= "images/big6.jpg"/></li> <li></li> <li></li> <li></li> </ul></div><!-- End of picture list--><!--Translucent layers start--><div class= "gray" ></div><!--translucent layers End--><!--show the big picture area start-up <div class= "showimg" >   </div>

CSS code:

<style type="text/css">*{margin:0px;padding:0px;}/*css样式表达方式：属性：值; 身高：1.7m； px像素*/#Main{width:1000px;/*宽*/ height:640px;/*高*/ /*background:#cc99cc;背景颜色*/    margin:30px auto 0px;}#Main ul li{width:288px;height:180px; border:4px solid #fff;/*粗细 风格 颜色边框*/ list-style-type:none;/*去掉前面的圆点*/ float:left;/*左浮动*/ margin:10px 17px;        box-shadow:5px 5px 10px #000; }.gray{width:100%; height:100%;background:rgba(0,0,0,0.6); position:fixed;/*固定定位*/ left:0px; top:0px; display:none;/*隐藏*/}.showImg{width:650px; height:406px; background:red; position:absolute;/*绝对定位*/            top:100px; left:400px; border:10px solid #fff; display:none;/*隐藏*/}.showImg img.but_l{position:absolute; top:170px; left:-70px;}.showImg img.but_r{position:absolute; top:170px; right:-70px;}</style>

JavaScript code:

<script type= "Text/javascript" src= "js/jquery.js" ></script><script type= "Text/javascript" > var _    index=0;    var bimg=null;        $ ("#Main ul li"). Click (function () {_index=$ (this). index ();//Get Serial number//alert (_index);        $ (". Gray"). Show ();//Display $ (". Showimg"). Show ();//Display bimg=$ (this). FIND ("img"). attr ("Bigsrc");        alert (BIMG);    $ (". Showimg img.show_bimg"). attr ("src", bimg);    });    $ (". Gray"). Click (function () {$ (". Gray"). Hide ();//Hides $ (". Showimg").    });        Click on the Right toggle button $ (". Showimg img.but_r"). Click (function () {_index++;//_index+1;        if (_index>8) {_index=8; alert ("to the right of the Head");}        bimg=$ ("#Main ul li"). EQ (_index). FIND ("img"). attr ("Bigsrc");    $ (". Showimg img.show_bimg"). attr ("src", bimg);    });        Click on the Left toggle button $ (". Showimg img.but_l"). Click (function () {_index--;//_index-1;        if (_index<0) {_index=0;alert ("to the left of the Head");} bimg=$ ("#Main ul li"). EQ (_index). FIND ("img"). attr ("bigsRC ");    $ (". Showimg img.show_bimg"). attr ("src", bimg); });</script>

Interested in learning to learn the Web front end can come to the Web front end Qun "189394454" can get 2018 of the latest web front-end learning materials for free.
Follow the public number → ' Learn the web front end ' to open your Web front end learning Path

Web front-end case-develop the QQ Space album display function