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

来源:https://www.sucaihuo.com/js/899.html 2016-07-19 07:30浏览(2975) 收藏

支持360度全方位浏览大图效果,支持鼠标拖拽浏览查看的图片插件。
jQuery支持鼠标拖动360度全方位浏览图片
分类:图片代码 > 图片拖动 难易:中级
查看演示 下载资源 下载积分: 20 积分

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);
});
标签: 360全景图
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2