jQuery 鼠标滑过图片预览大图（附注释）

原创

nkgines 2022-08-23 15:58:38 博主文章分类：前端开发（web） ©著作权

文章标签 html jquery javascript 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者nkgines的原创作品，请联系作者获取转载授权，否则将追究法律责任

博文内容主要是实现鼠标滑过某图片，实现预览放大效果。在学习jQuery的过程中积累一些小例子，多多积累、多多学习。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标滑过预览大图</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<style>
*{margin:0 auto;padding:0;list-style-type:square;}
img,a{border:0;}
.piccon{height:75px;margin:100px 0 0 50px;}
.piccon li{padding:0 10px;}
#preview{
position:absolute;border:1px solid #ccc;
background:#333;padding:3px;display:none;color:#fff;
opacity: .9;}
</style>
</head>
<body>
  <ul class="piccon">
    <li><a href="#" rel="images/1.jpg" class="preview">
    <img src="images/1s.jpg" alt="缩略图1" width="100" height="75" /></a></li>
    <li><a href="#" rel="images/2.jpg" class="preview">
    <img src="images/2s.jpg" alt="缩略图2" width="100" height="75" /></a></li>
    <li><a href="#" rel="images/3.jpg" class="preview">
    <img src="images/3s.jpg" alt="缩略图3" width="100" height="75" /></a></li>
  </ul>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>