查看: 1658|回复: 0

[DIV/CSS] 前端小白案例-爱新鲜抽屉式特效制作

发表于 2018-4-6 08:00:00

前端小白案例-爱新鲜抽屉式特效制作

知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,js特效编写,JS编程思维等。

html代码

  1. <div id="box">
  2. <div class="item">
  3. <img src="images/1.jpg" alt="美女" width="956" height="400"/><!--图片四要素-->
  4. <div class="line">爱新鲜</div>
  5. </div>
  6. <div class="item">
  7. <img src="images/2.jpg" alt="美女" width="956" height="400"/>
  8. <div class="line">一衣多穿</div>
  9. </div>
  10. <div class="item">
  11. <img src="images/3.jpg" alt="美女" width="956" height="400"/>
  12. <div class="line">评测擂台</div>
  13. </div>
  14. <div class="item">
  15. <img src="images/4.jpg" alt="美女" width="956" height="400"/>
  16. <div class="line">达人心经</div>
  17. </div>
  18. <div class="item">
  19. <img src="images/5.jpg" alt="美女" width="956" height="400"/>
  20. <div class="line">大咖卖场</div>
  21. </div>
  22. </div>
复制代码

css代码

  1. <style type="text/css">
  2. /*CSS层叠样式列表*/
  3. *{margin:0px;padding:0px;}/*通配符 1.对所有元素增加其样式 清楚所有默认内外边距 2.解决不同浏览器的兼容问题*/
  4. body{background:#000;/*背景颜色*/}
  5. #box{
  6. width:1120px;/*宽度 px像素*/
  7. height:400px;/*高度*/
  8. background:#fff;
  9. margin:120px auto 0px;/*上 左右(auto自动相等) 下*/
  10. position:relative;/*相对定位*/
  11. overflow:hidden;/*超出部分隐藏*/
  12. }
  13. #box .item{
  14. position:absolute;/*绝对定位
  15. 一般找父级定位 是不区分绝对与相对的 意思就是说不管父级是绝对还是相对,都是可以当做参照物的
  16. */
  17. top:0px;
  18. left:0px;
  19. }
  20. #box .item .line{
  21. width:20px;
  22. height:260px;
  23. background:#000;
  24. position:absolute;
  25. left:0px;
  26. top:0px;
  27. font-size:18px;/*文字大小*/
  28. padding:140px 10px 0px;
  29. color:#fff;/*文字颜色*/
  30. font-family:"微软雅黑";/*文字样式*/
  31. cursor:pointer;/*鼠标样式*/
  32. opacity:0.8;/*CSS3 盒子透明 0-1*/
  33. border-left:1px solid #fff;/*左边框 粗细 样式 颜色*/
  34. }
  35. </style>
复制代码

javascript代码:

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript">
  3. var arr = [];//数组
  4. var i=0;
  5. //each是自动循环的意思 JQ方法 [0,41,41*2,41*3,41*4]
  6. $("#box .item").each(function(i){//遍历
  7. $(this).css("left",i*41+"px");
  8. arr[i] = i*41;//保存每一个item的left值
  9. });
  10. $("#box .item .line").click(function(){
  11. var _index = $(this).parent().index();//获取序列号
  12. $("#box .item").each(function(i){
  13. if (i<=_index)
  14. {
  15. //符合条件部分
  16. $(this).animate({left:arr[i]+"px"},500);
  17. }else{
  18. //不符合条件部分
  19. $(this).animate({left:arr[i]+915+"px"},500);
  20. }
  21. });
  22. });
  23. </script>
复制代码


回复

使用道具 举报