×ðÁú¿­Ê±¹ÙÍøµÇ¼

thinkphp·Å´ó¾µÔõôд

thinkphpÊÇÒ»¿îºÜÊÇÊ¢ÐеÄphp¿ò¼Ü£¬Ò»Ö±Êܵ½¿í´ó¿ª·¢ÕßµÄϲ»¶¡£Ôڸÿò¼ÜÏ£¬ÊµÏÖͼƬ·Å´ó¾µ¹¦Ð§Ò²ºÜÊǼòÆÓ¡£ÏÂÃæÎÒÃǾÍÀ´Ò»²½²½½â˵ÔõÑùÔÚthinkphpÖÐʵÏÖͼƬ·Å´ó¾µÐ§¹û¡£

Ò»¡¢ÒýÈë·Å´ó¾µ´úÂë

ÔÚÍøÒ³ÖÐʹÓ÷Ŵó¾µÐ§¹û£¬ÐèÒª½èÖúJavaScript´úÂëʵÏÖ¡£ÎÒÃÇ¿ÉÒÔ´Ó»¥ÁªÍøÉÏÏÂÔØÒ»·Ý·Å´ó¾µ´úÂ룬Ҳ¿ÉÒÔ×Ô¼º±àд¡£ÕâÀïÎÒÃǼÙÉèÒѾ­ÓÐÁËÃûΪ magnifier.js µÄÎļþ£¬½«Æä°²ÅÅÔÚpublic/jsĿ¼Ï¡£

¶þ¡¢×¼±¸Í¼Æ¬×ÊÔ´

½«ÐèÒªÓ¦Ó÷Ŵó¾µÐ§¹ûµÄͼƬÉÏ´«ÖÁpublic/imagesĿ¼Ï£¬×¼±¸ºÃ·Å´óºóµÄͼƬ¡£

Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»

Èý¡¢±àдHTMLÄ£°åÎļþ

ÔÚÐèÒªÓ¦Ó÷Ŵó¾µÐ§¹ûµÄÒ³ÃæÖУ¬½¨ÉèÒ»¸ödivÈÝÆ÷£¬²¢ÉèÖÃËüµÄÑùʽΪ·Å´ó¾µÐ§¹ûÐèÒªµÄÑùʽ¡£½Ó×Å£¬ÔÚ¸ÃÈÝÆ÷ÖвåÈëimg±êÇ©£¬Ö¸¶¨ÐèÒªÓ¦Ó÷Ŵó¾µÐ§¹ûµÄͼƬ·¾¶£¬²¢ÉèÖøÃͼƬµÄÑùʽ£¬Ê¹Æä¿í¶È¡¢¸ß¶ÈºÍÑùʽÀàÃûÓëÈÝÆ÷¼á³ÖÒ»Ö¡£Í¬Ê±¸øimg±êÇ©ÉèÖÃÒ»¸ö×Ô½ç˵ÊôÐÔdata-magnify-src£¬Ö¸¶¨Í¼Æ¬±»·Å´óºóµÄ·¾¶£¬Õâ¸ö·¾¶¼´ÎÒÃÇÔ¤ÏÈ×¼±¸ºÃµÄͼƬ×ÊÔ´¡£

ÏÂÃæÎÒÃÇÀ´¿´Ò»ÏÂÄ£°å´úÂ룺

<!-- ÒýÈë·Å´ó¾µ´úÂë -->
<script type="text/javascript" src="/public/js/magnifier.js"></script>

<!-- ½¨ÉèÈÝÆ÷²¢²åÈëͼƬ -->
<div class="magnify-container">
    <img  class="magnify-image" src="/public/images/product.jpg" data-magnify-src="/public/images/product-large.jpg" alt="thinkphp·Å´ó¾µÔõôд" >
</div>

µÇ¼ºó¸´ÖÆ

ËÄ¡¢±àдJavaScript´úÂë

ÔÚJavaScriptÖУ¬ÎÒÃÇÊ×ÏÈÐèÒªÒýÈëÊʲÅÏÂÔصķŴ󾵴úÂëmagnifier.js¡£½Ó×Å£¬ÐèҪŲÓøôúÂëÖеÄmagnify()ÒªÁ죬½«ÒªÓ¦Ó÷Ŵó¾µÐ§¹ûµÄͼƬºÍÈÝÆ÷´«ÈëÒªÁì¡£×îºó£¬ÎÒÃÇ»¹¿ÉÒÔÉèÖÃһЩ²ÎÊý£¬ÈçͼƬ·Å´ó±¶Êý¡¢Êó±êÒƶ¯ºó·Å´óÇøÓòµÄ¾ÞϸµÈ¡£

ÏÂÃæÎÒÃÇÀ´¿´¿´JavaScript´úÂëʾÀý£º

<script type="text/javascript">
    // ÒýÈë·Å´ó¾µ´úÂë
    $.getScript("/public/js/magnifier.js", function(){
        // »ñȡͼƬԪËغÍÈÝÆ÷ÔªËØ
        var magnifyImg = $('.magnify-image');
        var magnifyContainer = $('.magnify-container');

        // Ó¦Ó÷Ŵó¾µÐ§¹û
        magnifyImg.magnify({
            // ÉèÖ÷Ŵó±¶Êý
            ratio: 3,
            // ÉèÖ÷ŴóÇøÓòµÄ¾Þϸ
            width: 300,
            height: 300,
            // ÉèÖõ±Êó±êÒƳöÈÝÆ÷ʱÊÇ·ñÒþ²Ø·Å´ó¾µÇøÓò
            srcollable: false,
            // ÉèÖÃ×·ËæÊó±êÒƶ¯µÄ°ë¾¶¹æÄ£
            radius: 100,
            // ÉèÖÃÊÇ·ñÏÔʾ·Å´óÇøÓòµÄ±ß¿ò
            border: false,
            // ÉèÖ÷ŴóÇøÓòµÄÐÎ×´
            shape: 'circle'
        });
    });
</script>

µÇ¼ºó¸´ÖÆ

Îå¡¢ÑùʽÉèÖÃ

×îºó£¬ÎÒÃÇ»¹ÐèҪΪÈÝÆ÷ºÍͼƬÉèÖÃÑùʽ£¬Ê¹ËüÃÇλÖþÓÖÐÇÒÓëÈÝÆ÷¾ÞϸһÖ¡£

ÏÂÃæÊÇCSS´úÂëʾÀý£º

<style type="text/css">
    /* ÈÝÆ÷Ñùʽ */
    .magnify-container {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        position: relative;
    }

    /* ͼƬÑùʽ */
    .magnify-image {
        width: 100%;
        height: 100%;
    }
</style>

µÇ¼ºó¸´ÖÆ

ÖÁ´Ë£¬Í¨¹ýÒÔÉϼ¸¸ö°ì·¨£¬ÎÒÃÇÒѾ­ÀÖ³ÉʵÏÖÁËÔÚThinkPHPÖÐÓ¦Ó÷Ŵó¾µÐ§¹ûµÄ¹¦Ð§¡£

ÒÔÉϾÍÊÇthinkphp·Å´ó¾µÔõôдµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ