jQuery实现360°全景拖动展示

360全景就是视角超过人的正常视角的图像,而我们这里说的全景特指水平视角360度,垂直视角180度的图像。可以全景空间里进行切换,达到浏览各个不同场景360全景展示的目的。

CSS

复制代码 代码如下:

html,body{background:#333;}
 #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}
 #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}
 #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}
 #demo img{border-radius:8px;border:5px solid #555;}
 .back{font-size:18px;line-height:130%;padding:8px 20px;color:#fff;}
 #back-home{left:0px;top:0px;background:#35916D;}
 #back-article{right:0px;top:0px;background:#444;}
 #back-download{right:0px;bottom:0px;background:#CE565D;}

HTML

复制代码 代码如下:



js

复制代码 代码如下:




以上就是jQuery实现360°全景拖动展示的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程