您的位置：首页 > Web前端 > JQuery

JQuery 第三方插件，jqzoom插件，图片放大镜

2017-12-20 15:57 766 查看
插件下载：http://www.jb51.net/jiaoben/29216.html    官方下载：http://www.mind-projects.it/projects/jqzoom/

1、<link href="css/jqzoom.css" rel="stylesheet" />  <!--引入jqzoom的css样式-->

2、<script src="scripts/jquery-1.7.1.min.js"></script>  <!--先引入jquery-->

3、<script src="scripts/jquery.jqzoom.js"></script>  <!--再引入jqzoom.js插件-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jqzoom图片放大镜插件</title>
<link href="css/jqzoom.css" rel="stylesheet" /> <!--引入jqzoom的css样式-->
<script src="scripts/jquery-1.7.1.min.js"></script> <!--先引入jquery-->
<script src="scripts/jquery.jqzoom.js"></script> <!--再引入jqzoom.js插件-->
<script>
$(function () {
$('.jqzoom').jqueryzoom({
xzoom: 400, //放大图的宽度(默认是 200)
yzoom: 400, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload: 1
});
});
</script>
</head>
<body>

<div class="jqzoom">
<img src="images/image_small.jpg" alt="" jqimg="images/image_big.jpg">
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航