经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
从小变大的照片
来源:cnblogs  作者:御风捉云  时间:2020/11/9 15:18:52  对本文有异议
  1. <head>
  2. <style>
  3. * {
  4. padding: 0;
  5. margin: 0;
  6. }
  7. ul{
  8. list-style: none;
  9. overflow: hidden;
  10. }
  11. ul li{
  12. float: left;
  13. width: 60px;
  14. height: 60px;
  15. margin-left: 30px;
  16. margin-top: 30px;
  17. border: 2px solid #da10a7b6;
  18. }
  19. ul li.active{
  20. border-color:rgb(0, 255, 85);
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <img src="p/01.jpg" id="bigImg" width="400px" height="400px">
  26. <ul>
  27. <li class="active">
  28. <a href="">
  29. <img src="p/02.jpg" width="46" class="smallImg">
  30. </a>
  31. </li>
  32. <li>
  33. <a href="">
  34. <img src="p/03.jpg" width="46" class="smallImg">
  35. </a>
  36. </li>
  37. <li>
  38. <a href="">
  39. <img src="p/04.jpg" width="46" class="smallImg">
  40. </a>
  41. </li>
  42. <li>
  43. <a href="">
  44. <img src="p/05.jpg" width="46" class="smallImg">
  45. </a>
  46. </li>
  47. </ul>
  48. <script>
  49. // 1.获取事件源
  50. var bigImg = document.getElementById('bigImg');
  51. var smallImgs = document.getElementsByClassName('smallImg');
  52. for (var i = 0; i < smallImgs.length; i++) {
  53. // 遍历集合,给每个img标签添加事件
  54. smallImgs[i].onmouseover = function () {
  55. // 将悬浮的每个li标签类名置为空
  56. for (var j = 0; j < smallImgs.length; j++) {
  57. smallImgs[j].parentNode.parentNode.setAttribute('class', '');
  58. }
  59. // 修改大图src属性
  60. var smallImgSrc = this.getAttribute('src');
  61. bigImg.setAttribute('src', smallImgSrc);
  62. // 给鼠标悬浮的img标签中的父标签添加类
  63. this.parentNode.parentNode.setAttribute('class', 'active');
  64. }
  65. }
  66. </script>

原文链接:http://www.cnblogs.com/flyover/p/13933704.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号