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); 
});