不知道我这个标题把效果说明白没有,效果是这样的,如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>
分享到:
相关推荐
点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气。
css实现超酷图片切换
css图片外边框效果实现 css图片外边框效果实现
通过CSS来实现这个效果,背景图只有一张,但是鼠标经过各导航菜单选项时,却看到不同的背景图。
一半只有table,默认图片才会上下居中,现在只需要加几行css即可实现,高级。使用方法简单:图片外围包含两个容器即可,并设置图片宽度以及高度,如果是动态读取的话,则需要程序传递一个图片的高度以及宽度即可。
CSS实现百度百科菜单导航 CSS实现百度百科菜单导航 CSS实现百度百科菜单导航 CSS实现百度百科菜单导航 CSS实现百度百科菜单导航
一、图片实现圆形条件 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-...
让我们来实现它! 呈现光泽图片 下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些。 注意:左边的那张是纯白色的,所以看不到,两张图在CSS代码中都要用到。 HTML代码 制作这种...
纯css实现的漂亮的左右二级导航效果,支持所有浏览器,无需任何javascript
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
1.div banner就是上文中提到的轮播的窗口,它就是呈现图片的部分。 2.无序列表 img:用来存放要进行呈现的图片,而图片的水平放置与零间隙...4.div btn :轮播图的左右按钮的呈现通过标签以及后面的Css代码进行实现。
css实现的纵向导航条,适合左右划分的界面布局网站。
模仿苹果导航条效果,背景图片大小适中适合导航文字宽度
Javascript+CSS实现的弧形导航二级菜单,外观漂亮实用。
javascipt和CSS实现仿苹果系统导航菜单.
CSS实现网页图片切换轮播
纯CSS实现方格图片鼠标划过放大效果下载
jquery+css3实现图片背景全屏左右图片切换效果,供大家一起共同分享学习。
纯CSS代码实现的图片列表滚动,就像有些网站的图片友情链接的功能一样,有拖动条哦,采用CSS实现类似框架的效果,好处是对搜索引擎友好,并非使用了框架,实现方法推敲一下,部分图片实现了透明效果。