go7hic / movepic

一个鼠标移动图片放大的插件

movePic

一个鼠标移动到图片上显示放大效果的 jQuery 插件，很多电商网站都有这个效果。

DEMO

http://yongyuan.us/demo/movePic

使用

1.引入 jQuery 文件

2.引入 jquery.movePic.js文件

3.具体示例

<div class="movePic">
    <div id="demo" data-src="image.jpg" style="width: 200px"><img src="image.jpg" alt=""></div>
</div>

建议设置拥有 data-src 标签的宽度和里面 img 宽度一样

使用插件默认的图片大小和颜色

 $(function () {
        $("#demo").movePic()
    })

如果要改成自己喜欢的颜色可以这样设置，把里面对应的值改成你需要的值

$("#demo").movePic({
      // 鼠标样式变量
        shadeColor: "#57ad68",
        shadeBorder: "#57ad68",
        shadeOpacity: 0.5,
        cursor: "move",
        // 大图的样式变量
        layerWidth: 400,
        layerHeight: 300,
        layerBorder: "#ddd",
        fade: true,

        largeWidth: 1280,
        largeHeight: 960
});