查看: 444|回复: 0

[DIV/CSS] web前端基础案例-开发QQ空间旋转时光轴

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

web前端基础案例-开发QQ空间旋转时光轴
知识点:html标签,css样式属性,代码优化,行业规范,布局思路,javascript基础,jquery方法,逻辑思维。
html代码

  1. <div class="con">
  2. <div class="top">
  3. <img src="images/my.jpg" height="667" width="500" alt="关键词" />
  4. <p>经典课程集</p>
  5. </div>
  6. <div class="pic-list">
  7. <div class="content">
  8. <div class="pic"></div>
  9. <div class="bq">
  10. <span>2016/10/15</span>
  11. <img src="images/r.png" />
  12. <i></i>
  13. </div>
  14. </div>
  15. <div class="content">
  16. <div class="pic"></div>
  17. <div class="bq">
  18. <span>2016/10/15</span>
  19. <img src="images/r.png" />
  20. <i></i>
  21. </div>
  22. </div>
  23. <div class="content">
  24. <div class="pic"></div>
  25. <div class="bq">
  26. <span>2016/10/15</span>
  27. <img src="images/r.png" />
  28. <i></i>
  29. </div>
  30. </div>
  31. <div class="content">
  32. <div class="pic"></div>
  33. <div class="bq">
  34. <span>2016/10/15</span>
  35. <img src="images/r.png" />
  36. <i></i>
  37. </div>
  38. </div>
  39. <div class="content">
  40. <div class="pic"></div>
  41. <div class="bq">
  42. <span>2016/10/15</span>
  43. <img src="images/r.png" />
  44. <i></i>
  45. </div>
  46. </div>
  47. <div class="content">
  48. <div class="pic"></div>
  49. <div class="bq">
  50. <span>2016/10/15</span>
  51. <img src="images/r.png" />
  52. <i></i>
  53. </div>
  54. </div>
  55. <div class="content">
  56. <div class="pic"></div>
  57. <div class="bq">
  58. <span>2016/10/15</span>
  59. <img src="images/r.png" />
  60. <i></i>
  61. </div>
  62. </div>
  63. <div class="content">
  64. <div class="pic"></div>
  65. <div class="bq">
  66. <span>2016/10/15</span>
  67. <img src="images/r.png" />
  68. <i></i>
  69. </div>
  70. </div>
  71. <div class="content">
  72. <div class="pic"></div>
  73. <div class="bq">
  74. <span>2016/10/15</span>
  75. <img src="images/r.png" />
  76. <i></i>
  77. </div>
  78. </div>
  79. <div class="content">
  80. <div class="pic"></div>
  81. <div class="bq">
  82. <span>2016/10/15</span>
  83. <img src="images/r.png" />
  84. <i></i>
  85. </div>
  86. </div>
  87. <div class="content">
  88. <div class="pic"></div>
  89. <div class="bq">
  90. <span>2016/10/15</span>
  91. <img src="images/r.png" />
  92. <i></i>
  93. </div>
  94. </div>
  95. <div class="content">
  96. <div class="pic"></div>
  97. <div class="bq">
  98. <span>2016/10/15</span>
  99. <img src="images/r.png" />
  100. <i></i>
  101. </div>
  102. </div>
  103. <div class="content">
  104. <div class="pic"></div>
  105. <div class="bq">
  106. <span>2016/10/15</span>
  107. <img src="images/r.png" />
  108. <i></i>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
复制代码

css代码

  1. <style>
  2. /*浏览器兼容问题*/
  3. *{margin:0;/*外边距*/padding:0;/*内边距*/}
  4. body{
  5. background:url('images/bg.jpg') fixed;
  6. /*background-attachment:;设置背景图是否固定或者随着页面滚动*/
  7. }
  8. .con{/*以 . 开头 class命名 类选择器*/
  9. width:900px;
  10. margin:0 auto;/*上下外边距0 左右自适应居中*/
  11. }
  12. .con .top{
  13. background:#fff;
  14. width:130px;
  15. height:170px;
  16. text-align:center;/*文本居中对齐*/
  17. font-size:14px;
  18. line-height:20px;
  19. margin-left:150px;
  20. padding-top:15px;
  21. }
  22. .con .top img{
  23. width:100px;
  24. height:auto;
  25. margin:0 auto;
  26. }
  27. .con .pic-list{
  28. width:600px;
  29. border-left:3px solid #00ccff;/*边框线*/
  30. margin-left:215px;
  31. padding-top:30px;
  32. }
  33. .con .pic-list .content{
  34. width:600px;
  35. height:400px;
  36. margin-bottom:30px;
  37. position:relative;/*相对定位 参照物*/
  38. -webkit-animation:sc 2s;/*定义动画*/
  39. display:none;
  40. }
  41. .con .pic-list .content .pic{
  42. width:590px;
  43. height:400px;
  44. margin-left:10px;
  45. background:rgba(0,0,0,0.5);
  46. border-radius:10px;/*小圆角*/
  47. box-shadow:0px 0px 4px 4px #737373;/*水平方向 垂直方向 虚化度 范围 颜色*/
  48. }
  49. .con .pic-list .content .bq{
  50. width:120px;
  51. height:30px;
  52. position:absolute;/*绝对定位*/
  53. top:100px;
  54. left:-116px;
  55. }
  56. .con .pic-list .content .bq span{
  57. display:block;
  58. background:#000;
  59. color:#fff;
  60. width:90px;
  61. height:30px;
  62. text-align:center;
  63. line-height:30px;
  64. float:left;
  65. }
  66. .con .pic-list .content .bq img{
  67. float:left;
  68. margin-top:7px;
  69. }
  70. .con .pic-list .content .bq i{
  71. float:right;
  72. width:6px;
  73. height:6px;
  74. background:#00cc33;
  75. border:2px solid #fff;
  76. border-radius:50%;
  77. margin-top:10px;
  78. }
  79. /*css3 动画*/
  80. @-webkit-keyframes sc{
  81. from{-webkit-transform:rotate(220deg) scale(0.2)}
  82. to{-webkit-transform:rotate(0deg) scale(1)}
  83. }
  84. </style>
复制代码

javascript代码:

  1. <script src="js/jquery.js"></script>
  2. <script>
  3. //jq里面如何获取对象 $// jq函数 $('元素')
  4. $('.content:lt(3)').show();//找到序列号小于3的元素 显示
  5. //滚动事件
  6. $(window).scroll(function(){
  7. var _top = $(window).scrollTop();//获取滚动条高度
  8. console.log( _top );
  9. $('.content').each(function(){//遍历
  10. var _index = $(this).index()+1;//当前序列号
  11. var _height = $(this).offset().top;//获取到当前content到浏览器窗口顶部距离
  12. if( _top < _height ){//优先原则
  13. $('.content:lt('+_index+')').show();
  14. $('.content:gt('+_index+')').hide();
  15. return false;//t跳出遍历
  16. }
  17. });
  18. });
  19. </script>
复制代码


回复

使用道具 举报