CSS兑现同一图片左右半边加链接导航
日期：2014-05-17 浏览次数：20644 次
CSS实现同一图片左右半边加链接导航
不知道我这个标题把效果说明白没有，效果是这样的，如QQ空间查看好友日志中的图片时，弹出的图片中，鼠标放在图片左右两边时，分别显示左右箭头，点击鼠标分别进入前一张图片或后一张图片。QQ空间有一个巨大的js库，它这个效果是用js实现的，下面是我用CSS实现的，很简单的代码，抛砖引玉，考虑其他情况，可以做成更高级的效果。
?
DEMO演示：http://lyjweb.appspot.com/image-nav.html
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
html,body{
background:#e0e0e0;
}
.imgBox img{
border:1px dashed #666;
}
.imgBox{
position: relative;
float:left;
}
.imgBox div{
position:absolute;
left:0px;
top:0px;
width:50%;
height:98%;
background: #fff;
opacity:0.0;
filter:alpha(opacity=0);
}
.imgBox .left{
cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/pre.cur'),default;
}
.imgBox .right{
left:50%;
cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/next.cur'),default;
}
</style>
</HEAD>
<BODY>
<div class="imgBox">
<img src="http://www.w3schools.com/images/pulpit.jpg"/>
<div class="left" onclick="alert('left');"> </div>
<div class="right" onclick="alert('right');"> </div>
</div>
</BODY>
</HTML>
?
1 楼
binlaniua
2010-10-27
不错, 很多图片浏览都是这样的波
2 楼
mr_sunq
2011-02-22
学习了，谢谢，很有用处的
3 楼
stand
2011-03-08
学习了，这个方法真的很不错
4 楼
mozhi_xiaotong
2011-03-18
还是觉得用脚本写的比较好，这个CSS在IE6以上版本中的Quirks文本模式下是不好用的，其它模式和FF浏览器中都好用。
Quirks模式也称怪异模式（或是兼容模式），我也觉得很怪异，至今未找到能兼容这种模式的CSS实现同样效果。
Quirks模式也称怪异模式（或是兼容模式），我也觉得很怪异，至今未找到能兼容这种模式的CSS实现同样效果。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
