jQuery图片缩放插件

所属分类:媒体-图片展示

 43633  406  查看评论 (10)
分享到微信朋友圈
X
jQuery图片缩放插件 ie兼容10

使用方法

 Inner

<div mag-thumb="inner">
    <img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner">
    <img src="img/alley/1000x600.jpg" />
</div>
$host = $('[mag-thumb="inner"]');
$host.mag();

使用鼠标滚轮可以对内部图片进行缩放。

Inner Inline

<div mag-thumb="inner-inline" mag-flow="inline">
    <img src="img/alley/500x300.jpg" style="width: 400px; max-width:100%;" />
</div>
<div mag-zoom="inner-inline">
    <img src="img/alley/1000x600.jpg" />
</div>
$host = $('[mag-thumb="inner-inline"]');
$host.mag();

  Outer

<div mag-thumb="outer">
    <img src="img/alley/500x300.jpg" />
</div>
<div style="width: 300px; height: 300px;">
    <div mag-zoom="outer">
        <img src="img/alley/1000x600.jpg" />
    </div>
</div>
$host = $('[mag-thumb="outer"]');
    $host.mag({
    mode: 'outer',
    ratio: 1 / 1.6
});		

使用鼠标滚轮可以对外部图片进行缩放。

Outer Drag

<div mag-thumb="outer-drag">
    <img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="outer-drag">
    <img src="img/alley/1000x600.jpg" />
</div>
$host = $('[mag-thumb="outer-drag"]');
$host.mag({
    mode: 'outer',
    position: 'drag',
    toggle: false
});

使用鼠标滚轮可以对外部图片进行缩放。

Drag

<div mag-thumb="drag">
    <img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="drag">
    <img src="img/alley/1000x600.jpg" />
</div>
$host = $('[mag-thumb="drag"]');
    $host.mag({
    position: 'drag',
    toggle: false
});

使用鼠标滚轮可以对图片进行缩放。

-   +   ^   v   <   >   [ ]   destroy Controls

<script src="src/js/mag-control.js"></script>

<div mag-thumb="controls">
    <img src="img/alley/500x300.jpg" />
</div>
    <div mag-zoom="controls">
<img src="img/alley/1000x600.jpg" />
</div>

<div mag-ctrl="controls">
    <button mag-ctrl-zoom-by="-0.5">-</button>
    <button mag-ctrl-zoom-by="0.5">+</button>
    <button mag-ctrl-move-by-y="-0.5">^</button>
    <button mag-ctrl-move-by-y="0.5">v</button>
    <button mag-ctrl-move-by-x="-0.5"><</button>
    <button mag-ctrl-move-by-x="0.5">></button>
    <button mag-ctrl-fullscreen>[ ]</button>
    <button mag-ctrl-destroy>destroy</button>
</div>
$host = $('[mag-thumb="controls"]');
    $host.mag(
    toggle: false,
    position: false
);

$controls = $('[mag-ctrl="controls"]');
    $controls.magCtrl({
    mag: $host
});
相关插件-图片展示

jQuery动态缩放焦点图

jQuery动态缩放焦点图
  图片展示
 34642  401

360度全景展示效果

按下鼠标左键拖拽360度全景展示效果
  图片展示
 37887  435

立体图片展示

图片随鼠标转向
  图片展示
 35165  482

jQuery仿京东商品放大镜

jQuery重写仿京东商品放大镜,使用更简单
  图片展示
 46696  540

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小李 0
    2023/3/31 14:57:06
    怎么停止这个控件 回复
    Li 0
    2018/7/28 16:06:52
    只能放大不能缩小? 回复
    男朋友 0
    2018/7/25 16:03:02
    $controls = $('[mag-ctrl="controls"]');
       $controls.magCtrl({
       mag: $host
    });

    这串代码写到那里???

    回复
    柳絮飞菲 0
    2018/5/9 13:05:24
    卑天抿人 0
    2018/1/15 14:05:36
    不错不错,挺好用的 回复
    忄笾?ジζ??????? 0
    2017/12/1 14:56:29
    ♂无ニ/唯①♀ 0
    2017/12/1 11:29:47

    怎么能让图片90度旋转?求教

    回复
    普明子 0
    2017/10/29 21:45:02

    对于我一个新手来说,不知道导入哪个文件。。。

    回复
    (_L.nメ° 0
    2017/10/25 13:38:11
    夜华君 0
    2017/10/23 14:24:48
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复