不知道我这个标题把效果说明白没有，效果是这样的，如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）来创建一个背景图片能根据导航文字宽度自适应的导航条，同时模仿苹果产品的导航条效果。以下将详细介绍这一技术...
让我们来实现它！ 呈现光泽图片 下面就是这张Addy在他博客上使用的图片： 比我需要的要大一些，但你可以把它裁剪一些。 注意：左边的那张是纯白色的，所以看不到，两张图在CSS代码中都要用到。 HTML代码 制作这种...
css图片外边框效果实现 css图片外边框效果实现
一半只有table，默认图片才会上下居中，现在只需要加几行css即可实现，高级。使用方法简单：图片外围包含两个容器即可，并设置图片宽度以及高度，如果是动态读取的话，则需要程序传递一个图片的高度以及宽度即可。
一、图片实现圆形条件 原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词：border-radius 语法： div{border-...
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
本文将深入探讨如何利用CSS实现图片的旋转效果，以及如何使多张图片以不同的频率围绕同一圆心旋转。 首先，我们从基础开始。CSS中的`transform`属性允许我们对元素进行各种变换，如旋转、缩放、移动和倾斜。要使...
1.div banner就是上文中提到的轮播的窗口，它就是呈现图片的部分。 2.无序列表 img：用来存放要进行呈现的图片，而图片的水平放置与零间隙...4.div btn ：轮播图的左右按钮的呈现通过标签以及后面的Css代码进行实现。
本教程将深入探讨如何使用CSS来创建一个适用于左右划分界面布局的纵向导航条。CSS（层叠样式表）是一种用于控制网页元素外观和布局的语言，通过合理地应用CSS规则，我们可以实现美观且功能强大的导航条。 首先，...
CSS用来美化导航栏，实现图片和文字的布局，以及添加动态效果。我们可以设置导航栏的宽度、高度、背景色，以及导航项的排列方式。例如，我们可能希望图片居中，文字在图片下方，并为悬停状态添加下划线或颜色变化：...
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
本话题主要探讨如何利用CSS实现图片的自动切换效果，这对于创建动态、吸引人的用户界面至关重要。 一、CSS图片切换基础 在CSS中，我们可以利用`@keyframes`规则来创建动画，通过改变元素在一段时间内的样式，实现...
以上就是使用纯CSS实现固定在网页底部菜单导航的基本方法。实际开发中，可能还需要考虑到与其他元素的相互作用，以及浏览器的兼容性问题。通过灵活运用CSS的各种属性和技巧，我们可以创造出既美观又实用的底部导航...
在这个特定的案例中，我们讨论的是一个使用HTML5和CSS3实现的图片左右切换动画，该动画具有弹性缓冲效果，能够提供一种高端且吸引用户的交互体验。 首先，HTML5的新特性之一是其媒体元素 `<img>` 的增强，允许...
纯CSS代码实现的图片列表滚动，就像有些网站的图片友情链接的功能一样，有拖动条哦，采用CSS实现类似框架的效果，好处是对搜索引擎友好，并非使用了框架，实现方法推敲一下，部分图片实现了透明效果。
在实现导航栏时，我们可能需要使用`ul`, `li`, `a`等标签的选择器，来控制导航项的列表样式、链接的外观和悬停效果。 此外，"font_3498162_fgjradjmgqq"和"font-awesome-4.7.0"这两个文件夹很可能包含了字体资源。...
"超好用的同一页面多组图片单行滚动Jquery实现代码"就是这样一个解决方案，它利用了强大的Jquery库来实现这一功能。 首先，Jquery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互...