360度全景展示

最新推荐文章于 2021-05-29 06:30:40 发布

半旧ad

最新推荐文章于 2021-05-29 06:30:40 发布

阅读量603

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端开发文章标签： JavaScript web开发

本文链接：https://blog.youkuaiyun.com/wyq024613/article/details/51305422

web前端开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实例，通过拖拽实现360度全景展示效果。利用HTML、CSS和JavaScript，实现了图片缓存、鼠标事件监听等功能。

之前学习JavaScript过程中，视频中学习的一个360度全景展示的实例。

可能比较简单，算是对之前学习的一个熟悉吧！

该应用通过拖拽可以展现物品的360度

1.开发前需要的图片

2.源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload = function() {
   var x=0;
   var oImg = document.getElementById('img1');
   var aImg = document.getElementsByTagName('img');
   var oLastImg = oImg;
   var i = 0;
   var iSpeed = 0;
   var lastX = 0;
   var timer = null;

//图片缓存

    for( i=1; i<77; i++) {
       (function(oNewImg){
           var oImg = new Image();

           oImg.onload = function() {
               oNewImg.src = this.src;
           }
           oImg.src = "img/miaov ("+ i +").jpg";

           oNewImg.style.display = 'none';
           document.body.appendChild(oNewImg);
       })(document.createElement('img'));

   }

//获取当前鼠标点击的坐标和移动的坐标