360中不显示html中图片不显示,识别并显示HTML中的360度图像

HTML：

jQuery Pan-o-matic

的JavaScript：

$('.pan-wrap').append('

play

');

var hoverInterval;

function doStuff() {

$(this).animate({

'background-position-x': '+=5%',

}, 250, 'linear');

}

$(function() {

$('.pan-wrap').hover(

function() {

$(this).empty();

hoverInterval = setInterval($.proxy(doStuff, this), 250);

},

function() {

// stop calling doStuff

$(this).append('

play

');

clearInterval(hoverInterval);

$('this').animate({

'background-position-x': '+=5%',

}, 1000, 'easeOutQuint');

});

});

CSS：

body {

background: rgb(240, 205, 97);

color: #fff;

font-size: 30px;

text-align: center;

}

.pan0 {

background: url('https://i.stack.imgur.com/suKT3.jpg');

background-size: cover;

}

.pan1 {

background: url('http://kthornbloom.com/public/pan.jpg');

}

.pan2 {

background: url('http://kthornbloom.com/public/pan2.jpg');

}

.pan-wrap {

margin: 0 auto;

width: 300px;

height: 300px;

overflow: hidden;

position: relative;

color: #fff;

font-size: 20px;

text-align: center;

font-family: sans-serif;

border-radius: 10px;

border: 5px solid rgb(209, 126, 20);

cursor: e-resize;

}

.play {

display: inline-block;

background: rgba(0, 0, 0, 0.71);

height: 25px;

width: 75px;

border-radius: 15px;

padding-top: 5px;

font-size: 14px;

top: 50%;

left: 50%;

margin-top: -15px;

margin-left: -34px;

position: absolute;

}

注意：不要忘了inclue jquery.easing.1.3.js到您的网页