直接上效果图 点击图片放大: 需要插入: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",--放大图的位置 })