查看: 1589|回复: 0

[DIV/CSS] web前端小白案例-鼠标移入移出效果

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

web前端小白案例-鼠标移入移出效果

知识点:html标签,css样式(企业样式的活用),html加css布局思维,代码优化。特效原理(class类名活用)。

html代码

  1. <div id="container">
  2. <div class="box1 text">
  3. <img src="images/1.jpg" width="250" height="350" alt="1.jpg"/> <!--四要素 src="图片储存位置" width="宽度" height="高度" alt="描述"-->
  4. <p>心形</p>
  5. </div>
  6. <div class="box2 con">
  7. <div class="pictxtop text">
  8. <img src="images/2.jpg" width="250" height="165" alt="" />
  9. <p>草原</p>
  10. </div>
  11. <div class="pictxtbotom text">
  12. <img src="images/3.jpg" width="250" height="165" alt="" />
  13. <p>荷花</p>
  14. </div>
  15. </div>
  16. <div class="box3 text">
  17. <img src="images/4.jpg" width="490" height="350" alt="" />
  18. <p>猫头鹰</p>
  19. </div>
  20. <div class="box4 con">
  21. <div class="pictxtop text">
  22. <img src="images/5.png" width="250" height="165" alt="" />
  23. <p>草原</p>
  24. </div>
  25. <div class="pictxtbotom text">
  26. <img src="images/6.jpg" width="250" height="165" alt="" />
  27. <p>荷花</p>
  28. </div>
  29. </div>
  30. </div>
复制代码

css代码

  1. <style>/*CSS层叠样式表 化妆师*/
  2. *{margin:0;/*外边距*/padding:0;/*内边距*/}/* *通用选择器 所有元素 */
  3. #container{/* #+ID选择器名字 */
  4. width:1315px;/*px 像素单位 百分比%*/
  5. height:350px;
  6. /*border:1px solid red;边框 : 大小 实线*/
  7. margin:150px auto;/*auto默认居中*/
  8. }
  9. #container .box1{ /* .+类选择器名字*/
  10. width:250px;
  11. height:350px;
  12. float: left;
  13. margin-right: 20px;
  14. }
  15. #container .box2{
  16. width:250px;
  17. height:350px;
  18. float: left;
  19. margin-right: 20px;/*右边 外边距*/
  20. }
  21. #container .box3{
  22. width:490px;
  23. height:350px;
  24. float:left;
  25. margin-right: 20px;
  26. }
  27. #container .box4{
  28. width:250px;
  29. height:350px;
  30. float:left;
  31. }
  32. #container .text{ position:relative;/*相对定位*/overflow:hidden;}
  33. #container .text p{
  34. height:30px;
  35. width:100%;
  36. background:rgba(0,0,0,0.5);/*0*/
  37. line-height:30px;/*行高*/
  38. text-indent:40px;/*字符缩进*/
  39. color:#fff;/*字体颜色*/
  40. position:absolute;/*绝对定位*/
  41. left:0;/*距离左边多少*/
  42. bottom:-30px;/*底部对齐多少*/
  43. }
  44. #container .con .pictxtop{
  45. width:250px;
  46. height:165px;
  47. }
  48. #container .con .pictxtbotom{
  49. width:250px;
  50. height:165px;
  51. margin-top:20px;
  52. }
  53. </style>
复制代码

javascript代码:

  1. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  2. <!--使用调用方法-->
  3. <script>
  4. //找元素 $("")
  5. $("#container .text").hover(function(){
  6. $(this).find("p").animate({bottom:"0px"})
  7. },function(){
  8. $(this).find("p").animate({bottom:"-30px"})
  9. });
  10. </script>
复制代码


回复

使用道具 举报