产品图片放大镜效果----jqzoom.js插件

发布时间：2020-08-01 13:16:03 阅读：614 作者：lflianglan 栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品图片放大镜效果</title>
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $(".jqzoom").jqzoom({
            zoomType:"standard",
            lens:true,
            preloadImages:false,
            alwaysOn:false,
            zoomWidth:340,
            zoomHeight:340,
            xOffset:10,
            yOffset:0,
            position:"right",
        });
    })
</script>
<style type="text/css">
    .zoomPad{
        width:340px;
        height:340px;
        position:relative;
        z-index:90;
        float:left;
    }
    .zoomPup{
        z-index:99;
        background:#fff;
        opacity:0.6;
        filter:alpha(opacity=60);
        cursor:crosshair;
    }
    .zoomWrapper{
        width:340px;
        height"340px;
        overflow:hidden;
        position:relative;
        border:1px solid #999;
    }
    .zoomWrapperTitle{
        height:18px;
        width:100%;
        background:#999;
        text-align:center;
        line-height:18px;
        position:absolute;
        left:0;
        top:0;
        z-index:100;
    }
</style>
</head>
<body>
    <div class="jqzoomWrap">
        <a href="blue_one_big.jpg" class="jqzoom" rel="gall" title>
            <img src="blue_one_small.jpg" id="bigImg" title="免烫纯棉条纹衬衫" alt="免烫纯棉条纹衬衫" />
       </a>
   </div>
   <div >
        <h3>jqzoom.js插件的各项参数说明</h3>
        zoomType  ：'standard'，'reverse' 默认'standard','reverse' 的时候开启透明;<br />
p_w_picpathOpacity ：默认0.2 透明度 开启'reverse' 的时候可用;<br />
zoomWidth： 宽度 zoomHeight 高度 默认都是200;<br />
xOffset ：默认10 x方向放大效果div的偏移<br />
yOffset ：默认0 y方向放大效果div的偏移<br />
position： 默认'right' 可选 :'right' ,'left' ,'top' ,'bottom' 放大效果的位置<br />
lens ：默认true 被放大区域是否突出<br />
title ：默认true 标题<br />
showEffect： 默认 'show' 可选'show' ,'fadein' 开启渐入效果<br />
hideEffect： 默认'hide' 可选 'hide' ,'fadeout' 开启渐处效果<br />
fadeinSpeed fadeoutSpeed ：可选 'fast','slow','medium' 默认 'slow' 出 入的速度<br />
showPreload true/false：是否显示加载<br />
preloadText： 默认 'Loading zoom' 加载是的标题<br />
preloadPosition： 默认 'center' 加载区位置（可自行更改css）
   </div>
</body>
</html>

有了这个插件，电商网站上产品放大镜的效果变得很简单了。

附件中有实例提供。

附件：http://down.51cto.com/data/2363211

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

产品图片放大镜效果----jqzoom.js插件

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签