jquery图片放大

爱被打了一巴掌 2023-07-13 10:53 4阅读 0赞

# jquery 图片放大 #

[点击查看图片放大效果][Link 1] [http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A4%A7%E9%95%9C.html][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70][]

<html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
    <script src="http://www.mmogapower.co/catalog/view/script/js/common/jquery.jqzoom-core.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.mmogapower.co/catalog/view/script/css/jquery.jqzoom.css">
    
    <body>
    <div style="display: flex;justify-content:center;position:relative;top:50%;align-items:Center;">
    
       <a class="img1" href="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/banner_christmas2.jpg" title="商品图片1" >
    		<img style="width:200px;" src="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/t5.jpg"  />
    	</a>
    
    	
        <a class="img1" href="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png" title="商品图片2" >
    		<img style="width:200px;" src="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png"  />
    	</a>
    	
    </div>
    </body>
     
    <script type="text/javascript">
            $(function () {
                $('.img1').jqzoom({
                    zoomType: 'standard',
                    zoomWidth:450,
                    zoomHeight:450,
    　　　　　　　　 xOffset:10,
    　　　　　　　　yOffset:0,
                    lens:true,
                    imageOpacity:1.0
                });
            })
        </script>
    </html>

**参数说明：**zoomWidht:　　小图片所选区域的宽度。

zoomHeight:　  小图片所选区域的高度。

zoomType:　　 默认值为standard。如果设为reverse，在小图片仲，移入鼠标时，所选区域高亮，非选中区域淡灰色。

xOffset:　　　　放大后的图片与小图片间的X(横坐标)距离。

yOffset:　　　　放大后的图片与小图片间的Y(纵坐标)距离。

position:　　　  放大后的图片相对原图片的位置，默认为"right",还可设置为"left","top","bottom"。

lens:　　　　　　布尔值，表示是否显示小图片中的选中区域，默认值为"true",如果设为"false"，则放大后的图片上面不会出现主题字样。

imageOpacity:　当zoomType的值为"reverse"时，用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

preloadImages：布尔值，表示是否重新加载大图像。

preloadText：　 重新加载大图像时，小图像显示的文本说明。

title：　　　　　 大图像顶部是否显示<a>标签里的title。

showEffect:　　 大图像加载时的特效，可选值:"show"表示直接显示，"fadein"由透明度渐变载入效果。

hideEffect：　　 大图像隐藏特效，可选值："hide"表示直接隐藏，"fadeout"透明度渐变隐藏。

fadeinSpeed:　　当大图像的载入特效设为"fadein"时，此属性可设置特效的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

fadtoutSpeed:　 当大图像的隐藏特效设为"fadeout"时，此属性可设置特效载的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

[Link 1]: http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A4%A7%E9%95%9C.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70]: /images/20230529/c89c32c57e5c49f7bfaf13254775a0ff.png