CSS部分：
a {
font:bold 12px/20px "宋体",sans-serif;
text-decoration:none;
}
#dyimgview {
width:260px;
}
#dyimgview h3 {
width:100%;
margin:10px 0;
overflow:hidden;
}
#dyimgview h3 a {
display:block;
width:20px;
height:20px;
margin:2px;
color:#fff;
text-align:center;
background-color:#aaa;
float:left;
}
#dyimgview h3 a:hover {
color:#f00;
background-color:#000;
}
#dyimgview ul {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
height:170px;
voice-family:"\"}\"";voice-family:inherit;
height:150px;
}
#dyimgview ul li {
height:150px;
}
#dyimgview ul img {
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span {
display:none;
cursor:pointer;
}
.tips:link,a.tips:hover {
display:block;
}
.tips:hover span {
display:block;
width:100%;
text-align:center;
position:relative;
z-index:99;
margin-top:-32px;
color:#fff;
background-color:#840606;
padding:0.2em 0;
filter:alpha(opacity=70);
opacity:0.7;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造图片展示</title>
</head>
<body>
<div id="dyimgview">
<h3><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></h3>
<ul>
<li id="a"><a href="" class="tips"><img src="1.jpg" alt="" /><span>哇塞，美女耶！</span></a></li>
<li id="b"><a href="" class="tips"><img src="2.jpg" alt="" /><span>喔，还是美女！</span></a></li>
<li id="c"><a href="" class="tips"><img src="3.jpg" alt="" /><span>作者本人</span></a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
CSS3的动画和过渡则可以用来增强页面切换的视觉效果。比如，可以通过添加淡入淡出、滑动等过渡效果，使得页面之间的切换更为平滑自然。同时，CSS3的`transform`和`opacity`属性可以轻松实现这些效果，且性能优于...
在网页设计领域，"页面书签选项卡效果"是一种常见的交互设计手法，它极大地提升了用户体验，使得用户可以方便地在不同的内容区域之间切换。这种效果通常结合了HTML、CSS和JavaScript技术来实现，其中CSS主要负责样式...
在这个项目中，我们利用CSS来创建一个翻页焦点图的效果，这是一种常见的网页动态展示方式，常用于产品展示、图片画廊等场景。下面将详细解释这一效果的实现原理。 首先，翻页焦点图的核心在于模拟书本翻页的效果，...
本文将深入探讨如何使用jQuery和CSS3创建炫酷的圆形图片切换特效，以及涉及到的相关文件结构。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。jQuery的易用性和强大...
**CSS3+JavaScript 缩略图幻灯片导航页面切换效果详解** 在现代网页设计中，动态和交互性是提升用户体验的重要元素。本教程将深入探讨如何利用CSS3和JavaScript实现一种创新的页面切换效果——缩略图幻灯片导航。...
【标题】"JS\js纵向图片切换\346"所指的是一种使用JavaScript实现的网页上图片的垂直滚动切换效果。在网页设计中，图片切换效果常常用于展示多张图片，如产品展示、轮播广告等。这种纵向切换方式不同于常见的水平...
在本案例中，“js图片切换特效”指的是使用JavaScript来实现图片在网页上的动态展示效果，如轮播图、淡入淡出、滑动切换等。 在实现图片切换特效时，JavaScript主要涉及到以下几个知识点： 1. **DOM操作**：...
【标题】"msn官网书签风格jquery焦点图切换"涉及到的是网页设计中的一种常见交互效果，它将msn官方网站的书签样式与jQuery库相结合，实现了一个动态的焦点图切换功能。这种功能通常用于网站的首页或者产品展示区域，...
Lightbox是一种广泛应用于网页设计中的技术，用于在用户点击缩略图时以全屏或半屏模式显示大图，提供了一种优雅的方式来展示一组图片。在这个"最新Lightbox点击图片放大相册效果"中，我们可以深入探讨几个关键知识点...
2. **过渡效果**：使用`transition`属性可以实现平滑的图片切换动画，增强用户体验。 3. **媒体查询**：利用`@media`规则，根据设备的视口宽度来调整布局，使轮播图在不同设备上都能正常显示。 **三、响应式设计** ...
【标题】"js带标题广告图片切换特效"是一种常见的网页设计技术，主要用于网站的广告展示或产品推广。这种特效通过JavaScript编程实现，可以为图片轮播添加动态效果，同时配合标题展示，提升用户体验，吸引用户的注意...
首先，文章讨论了使用CSS3能否制作出类似手风琴效果的书签。CSS3的动画和过渡特性确实可以实现一些基本的手风琴效果，比如通过改变`<p>`标签的宽度来模拟手风琴展开和收缩的动作。通过CSS3的`:hover`伪类或者...
例如，可以使用CSS实现游戏轮播图的滑动效果，调整背景音乐播放器的样式，以及设定动态过渡和动画效果，使整个网页更加生动有趣。同时，CSS还可以用于响应式设计，确保网页在不同设备上都能正常显示。 JavaScript...
3. CSS动画和过渡效果：使用CSS3的动画和过渡属性创建平滑的图片切换效果，比如淡入淡出、滑动等。 4. 数据管理：可能使用数组存储图片信息，包括URL、标题等，便于在JavaScript中管理和操作。 5. 时间函数：如`...
1. 外部接口通信：通过ExternalInterface，JS能够控制Flash的内部动作，如切换焦点图的当前显示项，更新书签状态等。 2. 响应式设计：JS可以根据屏幕尺寸或设备类型调整焦点图的布局和行为，以适应移动设备或桌面...
全屏布局页面转换是网页设计中一种常见的效果，它能够为用户提供沉浸式的浏览体验，尤其在展示图片或视频内容时尤为突出。在这个项目中，我们使用了jQuery和CSS3技术来实现这一效果。jQuery是一个广泛使用的...
书签式横向展开Flash焦点图代码是一种常见的网页交互设计元素，它主要用于展示一系列图片或内容，用户可以通过点击或滑动来浏览。这种效果通常应用于网站的首页，产品展示或者新闻滚动区域，以增加视觉吸引力和用户...
通过点击导航菜单的左右两端书签，用户可以方便地在这些焦点图片之间切换，以查看网站的不同推荐内容或者最新的更新。 描述还指出，这个Flash菜单的一个独特之处在于它省略了XML配置文件。在传统的Flash开发中，XML...
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现3D图片切换效果。这个话题源于一个名为"js实现3D图片切换源码下载"的项目，该项目包含了一系列的文件，如CSS样式表、HTML索引文件、图像资源以及JavaScript...