用jQuery+CSS3实现图片放大镜预览效果

2022-12-21

引用jQuery库lightzoom.js，并给图片添加类名：lightzoom，代码如下：

HTML

<img class="lightzoom" src="../images/viewpoint/mckde09929.jpg" />
<script type="text/javascript" src="../js/lightzoom.js"></script>

CSS

#glass {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
display: none;
background-repeat: no-repeat;
background-color: rgba(0,0,0,.6);
}

JavaScript

$(document).ready(function () {
    $('img.lightzoom').lightzoom({
        zoomPower : 4, //Default
        glassSize : 200, //Default
    });
});