不知道我这个标题把效果说明白没有，效果是这样的，如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>
分享到：
相关推荐
标题中的“CSS实现同一背景图的导航菜单”指的是利用CSS样式来设计一个导航菜单，其中每个菜单项都显示自同一张背景图像的不同部分。这种效果是通过调整背景图像的位置来实现的，使得当鼠标悬停在不同的菜单项上时，...
"js+css实现背景图片自适应宽度导航代码"的主题旨在教你如何利用JavaScript（js）和层叠样式表（css）来创建一个背景图片能根据导航文字宽度自适应的导航条，同时模仿苹果产品的导航条效果。以下将详细介绍这一技术...
css图片外边框效果实现 css图片外边框效果实现
让我们来实现它！ 呈现光泽图片 下面就是这张Addy在他博客上使用的图片： 比我需要的要大一些，但你可以把它裁剪一些。 注意：左边的那张是纯白色的，所以看不到，两张图在CSS代码中都要用到。 HTML代码 制作这种...
一半只有table，默认图片才会上下居中，现在只需要加几行css即可实现，高级。使用方法简单：图片外围包含两个容器即可，并设置图片宽度以及高度，如果是动态读取的话，则需要程序传递一个图片的高度以及宽度即可。
一、图片实现圆形条件 原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词：border-radius 语法： div{border-...
纯css实现的漂亮的左右二级导航效果，支持所有浏览器，无需任何javascript
本文将深入探讨如何利用CSS实现图片的旋转效果，以及如何使多张图片以不同的频率围绕同一圆心旋转。 首先，我们从基础开始。CSS中的`transform`属性允许我们对元素进行各种变换，如旋转、缩放、移动和倾斜。要使...
1.div banner就是上文中提到的轮播的窗口，它就是呈现图片的部分。 2.无序列表 img：用来存放要进行呈现的图片，而图片的水平放置与零间隙...4.div btn ：轮播图的左右按钮的呈现通过标签以及后面的Css代码进行实现。
本教程将深入探讨如何使用CSS来创建一个适用于左右划分界面布局的纵向导航条。CSS（层叠样式表）是一种用于控制网页元素外观和布局的语言，通过合理地应用CSS规则，我们可以实现美观且功能强大的导航条。 首先，...
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
这个“css实现图片（箭头）无缝滚动（向右）”的主题主要涉及到CSS动画和定位技术，我们将深入探讨如何使用CSS来创建这种效果。 首先，要实现图片的无缝滚动，我们需要使用`@keyframes`规则来定义一个动画。这是一...
以上就是使用纯CSS实现固定在网页底部菜单导航的基本方法。实际开发中，可能还需要考虑到与其他元素的相互作用，以及浏览器的兼容性问题。通过灵活运用CSS的各种属性和技巧，我们可以创造出既美观又实用的底部导航...
在这个特定的案例中，我们讨论的是一个使用HTML5和CSS3实现的图片左右切换动画，该动画具有弹性缓冲效果，能够提供一种高端且吸引用户的交互体验。 首先，HTML5的新特性之一是其媒体元素 `<img>` 的增强，允许...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
【纯css3带动画效果的左右滑动按钮】是一种利用CSS3特性实现的交互式设计，主要用于创建具有平滑动画和视觉吸引力的开关按钮。在现代网页设计中，这种按钮常用于用户界面，如设置选项、开启/关闭功能等。CSS3作为...
本资源“纯CSS3实现的图片切换幻灯片代码.zip”提供了一个无需JavaScript或jQuery的纯CSS3实现的图片切换幻灯片效果。这种技术在网页设计中非常常见，因为它可以为用户提供一种动态、吸引人的方式来展示多张图片，如...
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。