Jquery的jqzoom插件的使用（图片放大镜）

今天学习一下，图片放大镜功能，需要使用插件JQzoom

引入文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->
<link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>

js方法

<script>
    $(function(){
        $(".jqzoom").jqueryzoom({
            xzoom: 300, //放大图片的宽度(默认值200)  
            yzoom: 300, //放大图片的高度度(默认值200)
            offset: 10, //放大图片的偏移值(度(默认值10)
            position: "right" //放大图片的显示位置度(默认值“right”)
       });    
    })
</script>

html页面

<div>
    <div class="jqzoom"><img src="images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
    <div class="jqzoom"><img src="images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
</div>

整体demo例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jqzoom的使用（图片放大镜）</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->
<link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>

<script>
    $(function(){
        $(".jqzoom").jqueryzoom({
            xzoom: 300, //放大图片的宽度(默认值200)  
            yzoom: 300, //放大图片的高度度(默认值200)
            offset: 10, //放大图片的偏移值(度(默认值10)
            position: "right" //放大图片的显示位置度(默认值“right”)
       });    
    })
</script>

<body>
<!-- 使用样式文件（style.csc）,下面注释标签比较完善 -->
<!-- <div id="wrapper">
    <div id="maincontent">    
        <p>
            <div class="jqzoom"><img src="images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
            <div class="jqzoom"><img src="images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
        </p>                  
    </div>
</div>-->
<div>
    <div class="jqzoom"><img src="images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
    <div class="jqzoom"><img src="images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
</div>
</body>
</html>

demo例子效果图

demo下载地址：https://pan.baidu.com/s/1jfBjFvLFwQcm01Bf8rpw6w

Jquery的jqzoom插件的使用（图片放大镜）

猜你喜欢