"这部分的思路可以说全部秉承《a:hover 应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容 opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。它的结构层与《a:hover 应用精粹》的后三个示范出奇的相似。CSS ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 6 浏览 • 4 个月前

纯CSS相册2

这部分的思路可以说全部秉承《a:hover 应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容 opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。

它的结构层与《a:hover 应用精粹》的后三个示范出奇的相似。CSS 也足够强大地表达出我们想要新效果。

<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
//**************略*********
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
</ul>

用到的图片比较多，但结构我们应该很熟悉。一共 32 张，其实只是 16 张，每张重复使用 2 次（大图与小图）。我们要做的出效果，图片分析 4 行排列，每行 4 张，鼠标移到小图上面，对应的大图会在小图左上方出现，并遮住小图。实现思路是，限制 UL 元素的大小，并且 LI 元素全部左浮动。大图我们一开始就隐藏起来，当移动到小图上时，我们显示大图，并用绝对定位设置大图的位置，包含块设在 A 元素上。

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
}
#album img {
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px;
}
#album li{/*第2层*/
  float:left;/*用于平行排列与换行*/
}
 
#album span {
  display:none;/*平时隐藏大图*/
}
#album a:hover {
  position:relative;
}
#album a:hover span{/*第3层*/
  display:block;
  position:absolute;
  left:-50px;/*左移距离为小图的宽的一半*/
  top:-37px;/*上移距离为小图的高的一半*/
}
#album a:hover span img{
  width:200px;/*我们原图实现太大了，所以也要缩小一下*/
  height:150px;
}

<!doctype html> <title> 纯 CSS 相册 by 司徒正美 </title> <meta charset="utf-8"/> <meta name="keywords" content="纯 CSS 相册 by 司徒正美" /> <meta name="description" content="纯 CSS 相册 by 司徒正美" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{/* 第 1 层 */ width:400px; height:300px; } #album img { border:none;/* 默认存在边框，为了精确控制，我们清除它 */ display:block;/*li img 下方多出 5px 空白 bug*/ width:100px;/* 默认平时都以小图形式显示 */ height:75px; } #album li{/* 第 2 层 */ float:left;/* 用于平行排列与换行 */ } #album span { display:none;/ 平时隐藏大图 / } #album a:hover { position:relative; } #album a:hover span{/ 第 2+999 层 / display:block; position:absolute; left:-50px;/ 左移距离为小图的宽的一半 / top:-37px;/ 上移距离为小图的高的一半 / } #album a:hover span img{ width:200px;/ 我们原图实现太大了，所以也要缩小一下 / height:150px; } </style> <h1> 纯 CSS 相册 by 司徒正美 </h1> <ul id="album"> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> </ul>

运行代码

但需要的图片太多了，换言之，请求数也很多，这对服务器的压力很大，有没有办法砍掉一些呢？？能！因为我们可以通过 hover 切换相应图片的大小，就不需要 span 那一部分了。于是结构层更简单。

<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
 //****************略************
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
</ul>

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
}
#album li{/*第2层*/
  float:left;
  width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
  height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
}
#album img{
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px;
}
#album a:hover {
  position:relative;/*成为包含块*/
}
 
#album a:hover img{/*只有由hover激活的img才位于第3层*/
  position:absolute;
  left:-50px;/*上移小图的宽的一半*/
  top:-37px;/*上移小图的高的一半*/
  width:200px;
  height:150px;
}

运行代码

这次竟然发现在 chrome 出现问题，症状是大图总是出现第一幅小图之上，而不是我们鼠标指向那个小图上。留意我们的小图其实位于 A 元素上，而 A 元素为大图的包含块。不过 A 元素好像什么也没有设置，我们给点东西 A 做延缓 A 的渲染速度，可能 chrome 做了过多的内部优化……在样式中添加：

/*[修复chrome绝对定位错乱Bug*/
#album li a{
  display:block;/*让具有盒子模型*/
  width:100px;
  height:75px;
}
/*******完*****]*/

运行代码

纯CSS相册2

如果您觉得此文有帮助，可以打赏点钱给我支付宝 1669866773@qq.com ，或扫描二维码

相关帖子

随便看看

纯CSS相册2