jquery jqzoom插件练习

时间:2023-03-09 00:36:23
jquery jqzoom插件练习
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script>
<script src="../Packages/jquery.jqzoom.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$(".jqzoom").jqueryzoom({
xzoom: 300, //zooming div default width(default width value is 200)
yzoom: 300, //zooming div default width(default height value is 200)
offset: 40, //zooming div default offset(default offset value is 10)
position: "right", //zooming div position(default position value is "right")
preload: 1 // 1 by default
});
});
</script>
<link rel="stylesheet" href="../Styles/jqzoom.css" />
</head>
<body>
<div class="jqzoom">
<img src="../Images/shoe1_small.jpg" jqimg="../Images/shoe1_big.jpg" />
</div>
</body>
</html>

jqzoom下载