CSS实现同一图片左右半边加链接导航

无处不在 · 发表于 2011-7-19 09:44

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

DEMO演示：http://lyjweb.appspot.com/image-nav.html

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>

<!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>

曾经的小孩 · 发表于 2011-7-19 09:44

不错, 很多图片浏览都是这样的波

gz-vps · 发表于 2011-7-19 09:44

学习了，谢谢，很有用处的

gz-vps · 发表于 2011-7-19 09:44

学习了，这个方法真的很不错

broken · 发表于 2011-7-19 09:44

还是觉得用脚本写的比较好，这个CSS在IE6以上版本中的Quirks文本模式下是不好用的，其它模式和FF浏览器中都好用。
Quirks模式也称怪异模式（或是兼容模式），我也觉得很怪异，至今未找到能兼容这种模式的CSS实现同样效果。

fossil · 发表于 2011-7-20 19:14

原来是这样

醉倚西风 · 发表于 2011-7-22 10:31

搞笑．．哈哈．

ksdal · 发表于 2011-7-23 10:50

顶上去~~~~~~~~~~`

江南枫 · 发表于 2011-7-29 10:05

支持一下...........

帐号		自动登录	找回密码
密码			成为会员