[关闭]
@EncyKe 2016-05-09T02:18:34.000000Z 字数 6136 阅读 2082

JS:图片展示(手风琴效果)

前端 JavaScript



一、JS方法

HTML部分

  1. <div id='container'>
  2. <img src="" alt="" title="" />
  3. <img src="" alt="" title="" />
  4. <img src="" alt="" title="" />
  5. <img src="" alt="" title="" />
  6. </div>

CSS部分

  1. 父级容器div#container需相对定位,每一img绝对定位;
  2. 加入transition属性,可实现平缓过渡效果。
  1. *{
  2. transition:all .15s ease-in;
  3. }
  4. #container {
  5. height: 477px;
  6. margin: 0 auto;
  7. border-right: 1px solid #ccc;
  8. border-bottom: 1px solid #ccc;
  9. overflow: hidden;
  10. position: relative;
  11. }
  12. #container img {
  13. position: absolute;
  14. display: block;
  15. left: 0;
  16. border-left: 1px solid #ccc;
  17. }

JS部分

  1. window.onload = function() {
  2. // 获取容器对象
  3. var box = document.getElementById('container');
  4. // 获取图片NodeList对象集合
  5. var imgs = box.getElementsByTagName('img');
  6. // 获取单张图片的宽度
  7. var imgWidth = imgs[0].offsetWidth;
  8. // 设置掩藏门体露出的宽度
  9. var exposeWidth = 160;
  10. // 设置容器总宽度
  11. var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
  12. box.style.width = boxWidth + 'px';
  13. // 设置每道门的初始位置
  14. function setImgsPos() {
  15. for (var i = 1; i < imgs.length; i++) {
  16. imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
  17. }
  18. }
  19. setImgsPos();
  20. // 计算每道门打开时应移动的距离
  21. var translate = imgWidth - exposeWidth;
  22. // 为每道门绑定事件
  23. for (var i = 0; i < imgs.length; i++) {
  24. // 使用立即调用的函数表达式,为了获得不同的i值
  25. (function(i) {
  26. imgs[i].onmouseover = function() {
  27. // 先将每道门复位
  28. setImgsPos();
  29. // 打开门
  30. for (var j = 1; j <= i; j++) {
  31. imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
  32. }
  33. };
  34. }(i));
  35. }
  36. };

二、jQ方法

HTML部分

  1. 以列表下a标签中存放img的方法获取其hover属性,即li>a>img
  2. 竖直分隔虚线以<s>标签实现;
  3. 灰度遮罩层以<i>标签实现;
  1. <div id="subject" class="wrapper">
  2. <ul>
  3. <li>
  4. <a>
  5. <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  6. <div class="info">
  7. <h3 style="color:#f62368">聚美妆</h3>
  8. <p>聚美妆1/2周年庆</p>
  9. <p class="price"><strong>1</strong><i>折起</i></p>
  10. <p class="more">进入专题抢购 &gt; </p>
  11. </div>
  12. <s class="line"></s>
  13. <i class="mask"></i>
  14. </a>
  15. </li>
  16. <li class="big">
  17. <a>
  18. <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
  19. <div class="info">
  20. <h3 style="color:#ff578a">Baby购</h3>
  21. <p>宝宝该换装了,新品抢购</p>
  22. <p class="price"><strong>2.5</strong><i>折起</i></p>
  23. <p class="more">进入专题抢购 &gt; </p>
  24. </div>
  25. <s class="line"></s>
  26. <i class="mask"></i>
  27. </a>
  28. </li>
  29. <li>
  30. <a>
  31. <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
  32. <div class="info">
  33. <h3 style="color:#6d3fa7">时装团</h3>
  34. <p>时尚春装,清新小潮搭配</p>
  35. <p class="price"><strong>1</strong><i>折起</i></p>
  36. <p class="more">进入专题抢购 &gt; </p>
  37. </div>
  38. <s class="line"></s>
  39. <i class="mask"></i>
  40. </a>
  41. </li>
  42. <li>
  43. <a>
  44. <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
  45. <div class="info">
  46. <h3 style="color:#d61939">TV购</h3>
  47. <p>补血养颜 就这么简单</p>
  48. <p class="price"><strong>2.6</strong><i>折起</i></p>
  49. <p class="more">进入专题抢购 &gt; </p>
  50. </div>
  51. <s class="line"></s>
  52. <i class="mask"></i>
  53. </a>
  54. </li>
  55. <li>
  56. <a>
  57. <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
  58. <div class="info">
  59. <h3 style="color:#6f9400">聚新鲜</h3>
  60. <p>最纯正的泰国香米</p>
  61. <p class="price"><strong>5</strong><i>折起</i></p>
  62. <p class="more">进入专题抢购 &gt; </p>
  63. </div>
  64. <i class="mask"></i>
  65. </a>
  66. </li>
  67. </ul>
  68. </div>

CSS部分

  1. 压缩的容器宽度为156px;展示的容器为314px;
  2. 过渡效果以CSS3的transition实现,注意前缀兼容;
  3. 展示容器为.big,通过JS绑定onmouseover事件追加在悬停的容器上;
  1. /* reset */
  2. body,ul,li,p {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. ul,ol {
  7. list-style: none;
  8. }
  9. /* 外层大容器,需要计算好并限定宽度 */
  10. .wrapper{
  11. height:128px;
  12. border-radius:3px;
  13. border:1px solid #d3d3d3;
  14. border-color:rgba(0,0,0,.12);
  15. overflow:hidden;
  16. width:938px;
  17. background:#fff;
  18. margin:70px auto;
  19. }
  20. /* .wrapper ul{
  21. width:1000px;
  22. }*/
  23. .wrapper li{
  24. width:156px;
  25. height:128px;
  26. float:left;
  27. overflow:hidden;
  28. }
  29. .wrapper li,
  30. .wrapper li *{
  31. transition:all .1s linear;
  32. }
  33. .wrapper li a{
  34. width:156px;
  35. height:128px;
  36. display:block;
  37. position:relative;
  38. cursor:pointer;
  39. text-decoration:none;
  40. overflow:hidden;
  41. }
  42. .wrapper li a:hover{
  43. position:absolute;
  44. }
  45. .wrapper li img{
  46. height:72px;
  47. width:117px;
  48. position:absolute;
  49. bottom:0;
  50. right:-13px; /* 右部超出,在悬停时放大缩回 */
  51. }
  52. /* 文字标题样式 */
  53. .wrapper li .info{
  54. position:absolute;
  55. top:0;
  56. left:0;
  57. width:136px;
  58. padding:4px 10px;
  59. }
  60. .wrapper li .info h3{
  61. font-size:14px;
  62. font-weight:700;
  63. }
  64. .wrapper li .info p{
  65. color:#868686;
  66. font-size:12px;
  67. overflow:hidden;
  68. width:136px;
  69. height:22px;
  70. line-height:22px;
  71. }
  72. .wrapper li .info p.price{
  73. font-size:14px;
  74. font-style:italic;
  75. color:#fa2a5d;
  76. height:35px;
  77. }
  78. .wrapper li .info p.price strong{
  79. font-size:22px;
  80. font-family:Arial;
  81. padding-right:2px;
  82. }
  83. .wrapper li .info p.price i{
  84. font-size:14px;
  85. }
  86. .wrapper li .info p.more{
  87. display:none;
  88. }
  89. /* 竖直虚线,注意宽度为零 */
  90. .wrapper li .line{
  91. height:128px;
  92. width:0;
  93. font-size:0;
  94. border-right:1px dashed #cacaca;
  95. position:absolute;
  96. right:0;
  97. top:4px;
  98. }
  99. /* 展示容器 */
  100. .wrapper .big,
  101. .wrapper .big a,
  102. .wrapper .big .mask{
  103. width:314px;
  104. }
  105. .wrapper .big img{
  106. width:195px;
  107. height:120px;
  108. right:0;
  109. bottom:0;
  110. }
  111. .wrapper .big .info{
  112. width:294px;
  113. }
  114. .wrapper .big .info h3{
  115. font-size:18px;
  116. }
  117. .wrapper .big .info p{
  118. font-size:14px;
  119. width:166px;
  120. }
  121. .wrapper .big .info p.price{
  122. font-size:16px;
  123. padding-top:7px;
  124. }
  125. .wrapper .big .info p.price strong{
  126. font-size:28px;
  127. }
  128. .wrapper .big .info p.price i{
  129. font-size:16px;
  130. }
  131. .wrapper .big .info p.more{
  132. display:block;
  133. font-size:12px;
  134. color:#ff2a5b;
  135. }
  136. /* 定义灰度遮罩层 */
  137. .wrapper .mask{
  138. height:128px;
  139. width:156px;
  140. display:block;
  141. position:absolute;
  142. top:0;
  143. left:0;
  144. background:#000;
  145. -ms-filter:"alpha(Opacity=0)";
  146. filter:alpha(opacity=0);
  147. opacity:0;
  148. transition:opacity .2s ease-in;
  149. _display:none!important;
  150. }
  151. /* 悬停单个图片时,灰度遮罩层去除 */
  152. .wrapper li a:hover .mask{
  153. -ms-filter:"alpha(Opacity=0)";
  154. filter:alpha(opacity=0);
  155. opacity:0;
  156. transition:opacity .2s ease-in;
  157. }
  158. /* 悬停整个大容器时,灰度遮罩层出现 */
  159. .wrapper:hover .mask{
  160. -ms-filter:"alpha(Opacity=15)";
  161. filter:alpha(opacity=15);
  162. opacity:.15;
  163. transition:opacity .2s ease-in;
  164. }

JS部分

JS原生代码:

  1. // 事件绑定函数,判断浏览器支持事件监听与否;
  2. function bind(el, eventType, callback){
  3. if(typeof el.addEventListener === 'function'){
  4. el.addEventListener(eventType, callback, false);
  5. }
  6. else if(typeof el.attachEvent === 'function'){
  7. el.attachEvent('on' + eventType, callback);
  8. }
  9. }
  10. // 绑定悬停事件后的回调函数,
  11. function mouseoverHandler(e){
  12. var target = e.target || e.srcElement;
  13. var list = document.getElementsByTagName('li');
  14. // 清空类名;
  15. for (var i = 0; i < list.length; i++) {
  16. list[i].className = list[i].className.replace('big','');
  17. };
  18. // 排除事件冒泡机制,溯源至顶层的body
  19. while(target.tagName != 'LI' && target.tagName != 'BODY'){
  20. target = target.parentNode;
  21. }
  22. target.className = 'big';
  23. }
  24. // 初始化函数,遍历,为悬停的那一li追加big类名;
  25. function initList(){
  26. var list = document.getElementsByTagName('li');
  27. for(var i = 0; i < list.length; i++){
  28. bind(list[i], 'mouseover', mouseoverHandler);
  29. }
  30. }
  31. window.onload = initList;

或,jQuery代码:

  1. function mouseover(e){
  2. var list = $('#subject li');
  3. var target = $(e.target).parents('li');
  4. list.removeClass('big');
  5. target.addClass('big');
  6. }
  7. (function(){
  8. var outer = $('#subject');
  9. outer.find('li').on('mouseover', mouseover);
  10. })()

附:参考

慕课:DOM探索之基础详解篇
Demo下载(第一章)
慕课:手风琴效果
Demo下载

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注