不知道我这个标题把效果说明白没有，效果是这样的，如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>
分享到：
相关推荐
6. 指示器与导航：为了让用户知道当前显示的是哪张图片，我们可以添加导航箭头或页码指示器，这些可以通过CSS实现简单的形状和颜色效果，增强交互性。 总结来说，利用CSS3的特性，我们可以创造出各种酷炫的图片切换...
"js+css实现背景图片自适应宽度导航代码"的主题旨在教你如何利用JavaScript（js）和层叠样式表（css）来创建一个背景图片能根据导航文字宽度自适应的导航条，同时模仿苹果产品的导航条效果。以下将详细介绍这一技术...
css图片外边框效果实现 css图片外边框效果实现
一半只有table，默认图片才会上下居中，现在只需要加几行css即可实现，高级。使用方法简单：图片外围包含两个容器即可，并设置图片宽度以及高度，如果是动态读取的话，则需要程序传递一个图片的高度以及宽度即可。
css实现导航菜单带背景图效果，sky整理收集。 ul,li{ list-style:none; float:left;} body{ font-size:12px; line-height:1.6; font-family:Verdana, “宋体”, Arial; text-align:center;} #info li{ margin-left:...
一、图片实现圆形条件 原本不是圆形图片，通过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用来美化导航栏，实现图片和文字的布局，以及添加动态效果。我们可以设置导航栏的宽度、高度、背景色，以及导航项的排列方式。例如，我们可能希望图片居中，文字在图片下方，并为悬停状态添加下划线或颜色变化：...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
本话题主要探讨如何利用CSS实现图片的自动切换效果，这对于创建动态、吸引人的用户界面至关重要。 一、CSS图片切换基础 在CSS中，我们可以利用`@keyframes`规则来创建动画，通过改变元素在一段时间内的样式，实现...
以上就是使用纯CSS实现固定在网页底部菜单导航的基本方法。实际开发中，可能还需要考虑到与其他元素的相互作用，以及浏览器的兼容性问题。通过灵活运用CSS的各种属性和技巧，我们可以创造出既美观又实用的底部导航...
在这个特定的案例中，我们讨论的是一个使用HTML5和CSS3实现的图片左右切换动画，该动画具有弹性缓冲效果，能够提供一种高端且吸引用户的交互体验。 首先，HTML5的新特性之一是其媒体元素 `<img>` 的增强，允许...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...
纯CSS代码实现的图片列表滚动，就像有些网站的图片友情链接的功能一样，有拖动条哦，采用CSS实现类似框架的效果，好处是对搜索引擎友好，并非使用了框架，实现方法推敲一下，部分图片实现了透明效果。
在实现导航栏时，我们可能需要使用`ul`, `li`, `a`等标签的选择器，来控制导航项的列表样式、链接的外观和悬停效果。 此外，"font_3498162_fgjradjmgqq"和"font-awesome-4.7.0"这两个文件夹很可能包含了字体资源。...