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');">&nbsp;</div>
	<div class="right" onclick="alert('right');">&nbsp;</div>
</div>

</BODY>
</HTML>

 

你可能感兴趣的:(html,css,qq,XHTML)