自定义方法

show() hide() view() next() prev() move() moveTo() zoom() zoomTo() rotate() rotateTo() scale() scaleX() scaleY() play() stop() full() exit() tooltip() toggle() reset() destroy()

JavaScript

var viewer = new Viewer(document.getElementById('dowebok'), {
    url: 'data-original'
});

document.getElementById('btn1').onclick = function() {
    viewer.show();
}

document.getElementById('btn2').onclick = function() {
    viewer.hide();
}

document.getElementById('btn3').onclick = function() {
    viewer.view(5);
}

document.getElementById('btn4').onclick = function() {
    viewer.next();
}

document.getElementById('btn5').onclick = function() {
    viewer.prev();
}

document.getElementById('btn6').onclick = function() {
    viewer.move(-10, 0);
}

document.getElementById('btn7').onclick = function() {
    viewer.moveTo(0, 0);
}

document.getElementById('btn8').onclick = function() {
    viewer.zoom(0.1);
}

document.getElementById('btn9').onclick = function() {
    viewer.zoomTo(1);
}

document.getElementById('btn10').onclick = function() {
    viewer.rotate(90);
}

document.getElementById('btn11').onclick = function() {
    viewer.rotateTo(180);
}

document.getElementById('btn12').onclick = function() {
    viewer.scale(-1);
}

document.getElementById('btn13').onclick = function() {
    viewer.scaleX(-1);
}

document.getElementById('btn14').onclick = function() {
    viewer.scaleY(-1);
}

document.getElementById('btn15').onclick = function() {
    viewer.play();
}

document.getElementById('btn16').onclick = function() {
    viewer.stop();
}

document.getElementById('btn17').onclick = function() {
    viewer.full();
}

document.getElementById('btn18').onclick = function() {
    viewer.exit();
}

document.getElementById('btn19').onclick = function() {
    viewer.tooltip();
}

document.getElementById('btn20').onclick = function() {
    viewer.toggle();
}

document.getElementById('btn21').onclick = function() {
    viewer.reset();
}

document.getElementById('btn22').onclick = function() {
    viewer.destroy();
}

HTML

<ul id="dowebok">
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
    <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
    <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
</ul>

dowebok.com 说 明 下 载