目录
【案例】鼠标单击缩略图展示对应产品图片
【案例】鼠标悬停显示二维码
非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：
07前端交互实战：鼠标点击换图与悬停显示二维码的精彩实现
【案例】鼠标单击缩略图展示对应产品图片
以下是一个简单的图片切换功能，用户点击缩略图时，大图区域会显示对应的大图，截图如下：
示例代码如下：
css部分:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
border:0;
vertical-align: top;
}
ul{
list-style:none;
}
.mp{
width: 465px;
height: 465px;
border:1px solid #ccc;
border-bottom: none;
margin:20px 20px 0;
background-color: #fff;
}
.mpnav{
width: 465px;
height: 85px;
border:1px solid #ccc;
margin:0 20px;
background-color: #fff;
}
.mpnav ul{
overflow: hidden;
}
.mpnav li{
float: left;
margin:3px 0 5px 15px;
}
.mpnav img{
display:block;
}
</style>分析：给 img 元素设置vertical-align: top 用于避免图片下方出现额外的空白间隙。.mpnav ul 的 overflow: hidden 用于清除浮动，保证 ul 元素能正确包裹浮动的 li 元素。
Html和JavaScript部分:
<body>
<div class="mp">
<img src="images/1.jpg"/>
</div>
<div class="mpnav">
<ul>
<li>
<a href="images/1.jpg">
<img src="images/s1.jpg">分析：
结构设计：整体 HTML 结构清晰，包含两个主要的 div 元素。class 为 mp 的 div 用于展示大图，class 为 mpnav 的 div 用于展示缩略图列表。
元素用途：id 为 mpImg 的 img 元素是用于显示大图的，初始显示的是 images/1.jpg。
id 为 mpnav 的 div 里有一个无序列表 ul，列表项 li 中包含 a 标签和 img 标签。a 标签的 href 属性存储大图的路径，img 标签显示缩略图。
JavaScript 交互：通过 JavaScript 代码给每个 a 标签添加了 onclick 事件监听器。当点击缩略图对应的 a 标签时，会将大图 mpImg 的 src 属性更新为 a 标签的 href 属性值，同时使用 return false 阻止 a 标签的默认跳转行为。
【案例】鼠标悬停显示二维码
这段代码通过 CSS 进行样式布局，利用 JavaScript 实现鼠标悬停和移出的交互效果，当鼠标悬停在指定区域时，背景图片切换，同时显示二维码图片；鼠标移出时，恢复初始状态。，截图如下：
示例代码如下：
css部分:
<style type="text/css">
*{
margin:0;
padding:0;
}
.qrCode{
width:50px;
height:50px;
background: url(images/ewm01.jpg) no-repeat 0 0;
position:fixed;
right:20px;
top:50%;
margin-top:-25px;
cursor:pointer;
}
.qrCode img{
width:150px;
position: absolute;
left:-150px;
top:0;
display:none;
}
/* 方法二新增样式 */
.qrCode .db{
display: block;
}
.bg{
background-image: url(images/ewm02.jpg);
}
</style>分析：.qrCode 类样式使用 position: fixed 将元素固定在页面上，距离右侧 20px，垂直方向位于页面的 50% 处，通过 margin-top: -25px 实现垂直居中。
.qrCode img 样式使用 position: absolute 进行绝对定位，相对于 .qrCode 元素，向左偏移 150px，顶部对齐。
Html和JavaScript部分:
<body>
<div class="qrCode">
<img src="images/ewm03.jpg"/>
</div>
<script>
var qrCode=document.getElementById('qrCode');
var qrIcon=document.getElementById('qrIcon');
qrCode.onmouseover=function(){
this.style.backgroundImage='url(images/ewm02.jpg)';
qrIcon.style.display='block';
}
qrCode.onmouseout=function(){
this.style.backgroundImage='url(images/ewm01.jpg)';
qrIcon.style.display='none';
}
// 方法二
/*
qrCode.onmouseover=function(){
this.className='qrCode bg';
qrIcon.className='db';
this.onmouseout=function(){
this.className='qrCode';
qrIcon.className='';
}
}
*/
</script>
</body>分析：
HTML 结构：创建一个 div 元素，类名为 qrCode，id 为 qrCode，内部包含一个 img 元素，src 为 images/ewm03.jpg，id 为 qrIcon，用于显示二维码。
JavaScript 交互（方法一）
通过 document.getElementById 获取 div 元素和 img 元素。
为 div 元素添加 onmouseover 事件监听器，当鼠标悬停在 div 上时，将 div 的背景图片更换为 images/ewm02.jpg，并将二维码图片的显示方式设置为 block，使其显示出来。
为 div 元素添加 onmouseout 事件监听器，当鼠标移出 div 时，将 div 的背景图片恢复为 images/ewm01.jpg，并将二维码图片的显示方式设置为 none，使其隐藏。
JavaScript 交互（方法二）：这是另一种实现方式，通过修改元素的 className 来切换样式。当鼠标悬停时，为 div 元素添加 bg 类，为 img 元素添加 db 类；当鼠标移出时，移除相应的类。
暂无评论内容