<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jQuery.enlarge.min.js"></script>
<style>
img{
border:none;
float: left;
}
#demo{
margin: 100px auto;
}
</style>
</head>
<body>
<script>
$(function(){
$("#demo").enlarge({
// 鼠标遮罩层样式
shadecolor: "#FFD24D",
shadeborder: "#FF8000",
shadeopacity: 0.4,
cursor: "move",
// 大图外层样式
layer 480,
layerheight: 360,
layerborder: "#DDD",
fade: true,
// 大图尺寸
large 960,
largeheight: 720
});
});
</script>
<a href="IMG/fdj1-2.jpg" id="demo" style="position: relative;float: left;">
<img src="IMG/fdj1-2.jpg" width="240" height="180">
<img src="IMG/fdj1-2.jpg" width="960" height="720" style="display: none;">
</a>
</body>
</html>
