Chinaunix

标题: CSS实现同一图片左右半边加链接导航 [打印本页]
作者: totoo130    时间: 2011-03-09 07:24
标题: CSS实现同一图片左右半边加链接导航
转自 http://www.javaeye.com/topic/784974

不知道我这个标题把效果说明白没有，效果是这样的，如QQ空间查看好友日志中的图片时，弹出的图片中，鼠标放在图片左右两边时，分别显示左右箭头，点击鼠标分别进入前一张图片或后一张图片。QQ空间有一个巨大的js库，它这个效果是用js实现的，下面是我用CSS实现的，很简单的代码，抛砖引玉，考虑其他情况，可以做成更高级的效果。



DEMO演示：http://lyjweb.appspot.com/image-nav.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <HTML>
  4. <HEAD>
  5. <TITLE></TITLE>
  6. <style>
  7. html,body{
  8.         background:#e0e0e0;
  9. }
  10. .imgBox img{
  11.         border:1px dashed #666;
  12. }
  13. .imgBox{
  14.         position: relative;
  15.         float:left;
  16. }
  17. .imgBox div{
  18.         position:absolute;
  19.         left:0px;
  20.         top:0px;
  21.         width:50%;
  22.         height:98%;
  23.         background: #fff;
  24.         opacity:0.0;
  25.         filter:alpha(opacity=0);
  26. }
  27. .imgBox .left{
  28.         cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/pre.cur'),default;
  29. }
  30. .imgBox .right{
  31.         left:50%;
  32.         cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/next.cur'),default;
  33. }

  35. </style>

  37. </HEAD>

  39. <BODY>

  41. <div class="imgBox">
  42.         <img src="http://www.w3schools.com/images/pulpit.jpg"/>
  43.         <div class="left" onclick="alert('left');">&nbsp;</div>
  44.         <div class="right" onclick="alert('right');">&nbsp;</div>
  45. </div>

  47. </BODY>
  48. </HTML>
复制代码




欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2