產(chǎn)品圖片放大鏡效果----jqzoom.js插件-創(chuàng)新互聯(lián)

<!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>產(chǎn)品圖片放大鏡效果</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插件的各項(xiàng)參數(shù)說明</h3>
        zoomType  ：'standard'，'reverse' 默認(rèn)'standard','reverse' 的時(shí)候開啟透明;<br />
p_w_picpathOpacity ：默認(rèn)0.2 透明度 開啟'reverse' 的時(shí)候可用;<br />
zoomWidth： 寬度 zoomHeight 高度 默認(rèn)都是200;<br />
xOffset ：默認(rèn)10 x方向放大效果div的偏移<br />
yOffset ：默認(rèn)0 y方向放大效果div的偏移<br />
position： 默認(rèn)'right' 可選 :'right' ,'left' ,'top' ,'bottom' 放大效果的位置<br />
lens ：默認(rèn)true 被放大區(qū)域是否突出<br />
title ：默認(rèn)true 標(biāo)題<br />
showEffect： 默認(rèn) 'show' 可選'show' ,'fadein' 開啟漸入效果<br />
hideEffect： 默認(rèn)'hide' 可選 'hide' ,'fadeout' 開啟漸處效果<br />
fadeinSpeed fadeoutSpeed ：可選 'fast','slow','medium' 默認(rèn) 'slow' 出 入的速度<br />
showPreload true/false：是否顯示加載<br />
preloadText： 默認(rèn) 'Loading zoom' 加載是的標(biāo)題<br />
preloadPosition： 默認(rèn) 'center' 加載區(qū)位置（可自行更改css）
   </div>
</body>
</html>

有了這個(gè)插件，電商網(wǎng)站上產(chǎn)品放大鏡的效果變得很簡單了。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),利辛網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:利辛等地區(qū)。利辛做網(wǎng)站價(jià)格咨詢:18980820575

附件中有實(shí)例提供。

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：產(chǎn)品圖片放大鏡效果----jqzoom.js插件-創(chuàng)新互聯(lián)
瀏覽路徑：http://sd-ha.com/article42/jjghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、搜索引擎優(yōu)化、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

產(chǎn)品圖片放大鏡效果----jqzoom.js插件-創(chuàng)新互聯(lián)