图片放大镜插件-MLENS

 查看演示  website  立即下载

mlens是一款优秀的图片放大镜插件

使用步骤

1、引入以下的js和css文件

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>

2、在head标签中加入以下js代码

<script type="text/javascript">
$(document).ready(function()
{
    $("#green_monster").mlens(
    {
        imgSrc: $("#green_monster").attr("data-big"),   // path of the hi-res version of the image
        lensShape: "circle",                // shape of the lens (circle or square)
        lensSize: 180,                  // size of the lens (in px)
        borderSize: 4,                  // size of the lens border (in px)
        borderColor: "#fff",                // color of the lens border (#hex)
        borderRadius: 0                 // border radius (optional, only if the shape is square)
    });
});
</script>

3、在body标签中加入以下格式的html代码

<img id="green_monster" src="images/GreenMonster_640px.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_1280px.jpg">

PREVIOUS:
NEXT:
幻灯片插件ROYALSLIDER-VIDEO GALLERY
绚丽的幻灯片插件-IVIEW