尊龙凯时人生就是博

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
sitemap¡¢ÍøÕ¾µØͼ