jQuery支持鼠标拖动360度全方位浏览图片

收藏

支持360度全方位浏览大图效果，支持鼠标拖拽浏览查看的图片插件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

body属性设置和预加载各个方位的图片

$(document.body).attr({
    'onSelectStart': 'return false;',
    'oncontextmenu': 'return false;',
    'onbeforecopy': 'return false;',
    'oncopy': 'return false;',
    'ondragstart': 'return false;',
    'style': '-moz-user-select:none; '
            + '-khtml-user-select: none; user-select: none;'
});
var Preload = function(images, callback) {
    var done = 0, val = 0;
    var count = images.length;
    var preload = function(url) {
        var image = $("<img />").attr("src", url).on("load", function() {
            complete();
        });
    };
    var complete = function() {
        done++;
        val = done / count * 100;
        $('#loading span').text(Math.ceil(val) + "%");
        if (done == count) {
            callback();
        }
    };
    for (var i = 0; i < images.length; i++) {
        preload(images[i]);
    }
};
var images = [
    'drag/shiwai ceshi0006.jpg',
    'drag/shiwai ceshi0012.jpg',
    'drag/shiwai ceshi0018.jpg',
    'drag/shiwai ceshi0024.jpg',
    'drag/shiwai ceshi0030.jpg',
];
Preload(images, function() {
    $("#loading").fadeOut();
    $("#demo img").attr("src", images[0]);
    $("#demo").fadeIn();
    $("#demo img").drag360(images);
});