浏览 4423 次
|
锁定老帖子 主题：CSS实现同一图片左右半边加链接导航
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-10-14
不知道我这个标题把效果说明白没有，效果是这样的，如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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-10-27
不错, 很多图片浏览都是这样的波
|
| 返回顶楼 | |
|
发表时间：2011-02-22
学习了，谢谢，很有用处的
|
| 返回顶楼 | |
|
发表时间：2011-03-08
学习了，这个方法真的很不错
|
| 返回顶楼 | |
|
发表时间：2011-03-18
还是觉得用脚本写的比较好，这个CSS在IE6以上版本中的Quirks文本模式下是不好用的，其它模式和FF浏览器中都好用。
Quirks模式也称怪异模式（或是兼容模式），我也觉得很怪异，至今未找到能兼容这种模式的CSS实现同样效果。 |
| 返回顶楼 | |
|
发表时间：2011-08-03
试了一下，不好用。。感觉js实现比较好
|
| 返回顶楼 | |
|
发表时间：2011-08-03
就是在上方放两个透明的层，左右各一个且宽度50%
|
| 返回顶楼 | |
|
发表时间：2011-08-23
学习了，很不错噢！
|
| 返回顶楼 | |
