78 lines
3.2 KiB
JavaScript
Executable File
78 lines
3.2 KiB
JavaScript
Executable File
/*
|
|
* Copyright 2018-2018 the original author or authors.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* WebSite: http://bootstrap-viewer.leftso.com
|
|
*/
|
|
$.fn.bootstrapViewer = function (options) {
|
|
$(this).on('click', function () {
|
|
var opts = $.extend({}, $.fn.bootstrapViewer.defaults, options);
|
|
var viewer = $('<div class="modal fade bs-example-modal-lg text-center" id="bootstrapViewer" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >\n' +
|
|
' <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">\n' +
|
|
' <div class="modal-content">\n' +
|
|
' <img' +
|
|
'\t\t\t class="carousel-inner img-responsive img-rounded img-viewer" draggable="false"\n' +
|
|
'\t\t\t onclick="/*$(\'#bootstrapViewer\').modal(\'hide\');setTimeout(function(){$(\'#bootstrapViewer\').remove();},200);*/"\n' +
|
|
'\t\t\t onmouseover="this.style.cursor=\'move\';" \n' +
|
|
'\t\t\t onmouseout="this.style.cursor=\'default\'" \n' +
|
|
'\t\t\t />\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>');
|
|
$('body').append(viewer);
|
|
if ($(this).attr(opts.src)) {
|
|
$("#bootstrapViewer").find(".img-viewer").attr("src", $(this).attr(opts.src));
|
|
$("#bootstrapViewer").modal();
|
|
} else {
|
|
throw "图片不存在"
|
|
}
|
|
$('#bootstrapViewer').on('hidden.bs.modal', function(){
|
|
$('#bootstrapViewer').remove();
|
|
});
|
|
|
|
var $moveDiv = $('#bootstrapViewer .modal-dialog');
|
|
var isMove = false;
|
|
var div_x = $moveDiv.offset().left;
|
|
var div_y = $moveDiv.offset().top;
|
|
|
|
var mousedownFunc = function (e) {
|
|
if (isMove) {
|
|
var left = e.pageX - div_x;
|
|
var top = e.pageY - div_y;
|
|
if(left < 0){ left = 0}
|
|
if(top < 0){ top = 0}
|
|
$moveDiv.css({"left": left, "top":top});
|
|
}
|
|
}
|
|
|
|
$moveDiv.mousedown(function (e) {
|
|
$moveDiv.css({ left: $moveDiv[0].offsetLeft, top: $moveDiv[0].offsetTop, marginTop: 0, position: 'absolute' });
|
|
|
|
isMove = true;
|
|
div_x = e.pageX - $moveDiv.offset().left;
|
|
div_y = e.pageY - $moveDiv.offset().top;
|
|
$(document).mousemove(mousedownFunc);
|
|
}).mouseup(function () {
|
|
isMove = false;
|
|
$(document).unbind('mousemove', mousedownFunc);
|
|
});
|
|
})
|
|
|
|
$(this).on('mouseover', function () {
|
|
$(this).css('cursor', 'zoom-in');
|
|
})
|
|
}
|
|
$.fn.bootstrapViewer.defaults = {
|
|
src: 'src'
|
|
} |