html5手机网站照片查看器,pc端、移动端照片查看器（照片编辑器插件）

PC端：

首先文件引入：

html代码：

• 

• 

• 

再设置下样式：

.magnify-modal {

box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);

}

.magnify-header .magnify-toolbar {

width: 40px;

background-color: rgba(0, 0, 0, .5);

}

.magnify-stage {

top: 0;

left: 0;

bottom: 0;

right: 0;

border-width: 0;

}

.magnify-footer .magnify-toolbar {

display: inline-block;

height: 40px;

background-color: rgba(0, 0, 0, .5);

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

再重新定义下内容：

$('[data-magnify]').magnify({

headToolbar: [

'close'

],

footToolbar: [

'zoomIn',

'zoomOut',

'prev',

'fullscreen',

'next',

'actualSize',

'rotateRight'

],

title: false,

resizable:[ //模态窗口调整大小

'true'

],

keyboard:[]//键盘

});

效果：

手机端：

文件引入：

html代码：

手机端照片查看器

• 

• 

• 

js初始化：

mui.init();

mui.previewImage();

效果：

支持双击放大，缩小，左右切换