jQuery(放大镜和点击放大)

    科技2022-08-18  106

    直接上效果图 点击图片放大: 需要插入:jquery.thickbox.js文件 HTML代码:

    <span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="images/look.gif" /> </a> </span> <ul class="imgList"> <li> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img src="images/pro_img/blue_one.jpg" alt="" /> </a> </li> <li> <a href="images/pro_img/blue_two_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img src="images/pro_img/blue_two.jpg" alt="" /> </a> </li> <li> <a href="images/pro_img/blue_three_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img src="images/pro_img/blue_three.jpg" alt="" /> </a> </li> </ul>

    jQuery代码:

    <script src="jquery1.7.2/jquery.thickbox.js" type="text/javascript" charset="utf-8"></script>

    鼠标移动放大镜: HTML代码同上不改变 jQuery代码: 还是需要插入新的插件脚本:jquery.jqzoom.js

    <script src="jquery1.7.2/jquery.jqzoom.js" type="text/javascript" charset="utf-8"></script> $(function () { $(".jqzoom").jqueryzoom({ xzoom: 300,--放大镜的宽度 yzoom: 300,--放大镜的高度 offset:10,--距离原图的距离 position: "right",--放大图的位置 })
    Processed: 0.014, SQL: 9