jQuery实现360°全景拖动展示


Posted in Javascript onMarch 18, 2015

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

<div id="demo" class="px hide"><img /></div>

<div id="loading" class="px"><span class="pa"></span></div>

js

<script src="scripts/jquery.js?1.11.1"></script>

<script src="scripts/jquery.drag360.js"></script>

<script>

$(function(){

    $(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',

   'drag/shiwai ceshi0036.jpg',

   'drag/shiwai ceshi0042.jpg',

   'drag/shiwai ceshi0048.jpg',

   'drag/shiwai ceshi0054.jpg',

   'drag/shiwai ceshi0060.jpg',

   'drag/shiwai ceshi0066.jpg',

   'drag/shiwai ceshi0072.jpg',

   'drag/shiwai ceshi0078.jpg',

   'drag/shiwai ceshi0084.jpg',

   'drag/shiwai ceshi0090.jpg',

   'drag/shiwai ceshi0096.jpg',

   'drag/shiwai ceshi0102.jpg',

   'drag/shiwai ceshi0108.jpg',

   'drag/shiwai ceshi0114.jpg',

   'drag/shiwai ceshi0120.jpg',

   'drag/shiwai ceshi0126.jpg',

   'drag/shiwai ceshi0132.jpg',

   'drag/shiwai ceshi0138.jpg',

   'drag/shiwai ceshi0144.jpg',

   'drag/shiwai ceshi0150.jpg',

   'drag/shiwai ceshi0156.jpg',

   'drag/shiwai ceshi0162.jpg',

   'drag/shiwai ceshi0168.jpg',

   'drag/shiwai ceshi0174.jpg',

   'drag/shiwai ceshi0180.jpg',

   'drag/shiwai ceshi0186.jpg',

   'drag/shiwai ceshi0192.jpg',

   'drag/shiwai ceshi0198.jpg',

   'drag/shiwai ceshi0204.jpg',

   'drag/shiwai ceshi0210.jpg',

   'drag/shiwai ceshi0216.jpg',

   'drag/shiwai ceshi0222.jpg',

   'drag/shiwai ceshi0228.jpg',

   'drag/shiwai ceshi0234.jpg',

   'drag/shiwai ceshi0240.jpg',

   'drag/shiwai ceshi0246.jpg',

   'drag/shiwai ceshi0252.jpg',

   'drag/shiwai ceshi0258.jpg',

   'drag/shiwai ceshi0264.jpg',

   'drag/shiwai ceshi0270.jpg',

   'drag/shiwai ceshi0276.jpg',

   'drag/shiwai ceshi0282.jpg',

   'drag/shiwai ceshi0288.jpg',

   'drag/shiwai ceshi0294.jpg',

   'drag/shiwai ceshi0300.jpg',

   'drag/shiwai ceshi0306.jpg',

   'drag/shiwai ceshi0312.jpg',

   'drag/shiwai ceshi0318.jpg',

   'drag/shiwai ceshi0324.jpg',

   'drag/shiwai ceshi0330.jpg',

   'drag/shiwai ceshi0336.jpg',

   'drag/shiwai ceshi0342.jpg',

   'drag/shiwai ceshi0348.jpg',

   'drag/shiwai ceshi0354.jpg',

   'drag/shiwai ceshi0360.jpg',

 ];

 Preload(images,function(){

  $("#loading").fadeOut();

  $("#demo img").attr("src",images[0]);

  $("#demo").fadeIn();

  $("#demo img").drag360(images);

 });
});

</script>

drag.js

(function($){

    $.fn.drag360=function(images){

        var mdx,mmx,isDrag=false,unitStep=40,current=0;

        var that=$(this);

        var length=images.length;

        //触摸  

        that.on('touchstart',function(e){

            var touch = e.originalEvent;

                mdx = touch.changedTouches[0].pageX;

                isDrag=true;

        }).on('touchmove',function(e){

            e.preventDefault();

            touch = e.originalEvent.touches[0]||e.originalEvent.changedTouches[0];

            mmx=touch.pageX;

            if(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    if(mmx-mdx>0){

                        current=current+1; 

                    }else{

                        current=current-1;

                    }

                    mdx=mmx;

                    if(current<0)current=length-1;

                    if(current>length-1)current=0;

                    that.attr("src",images[current]);

                }

            }

        }).on('touchend',function(e){

            isDrag=false;

        });

        //拖动

        that.on('mousedown',function(e){

            mdx=e.pageX;

            isDrag=true;

        }).on('mousemove',function(e){

            mmx=e.pageX;

            if(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    current=current+(mmx-mdx>0?1:-1);

                    mdx=mmx;

                    if(current<0)current=length-1;

                    if(current>length-1)current=0;

                    that.attr("src",images[current]);

                }

            }

            return false;

        })

        $(document).on('mouseup',function(e){

            isDrag=false;

        });

        $(document).on('mouseleave',function(e){

            isDrag=false;

        });

        return this;

    };

})(jQuery);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
自定义百度分享的分享按钮
Mar 18 #Javascript
javascript实现密码强度显示
Mar 18 #Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 #Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 #Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 #Javascript
JS制作简单的三级联动
Mar 18 #Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 #Javascript
You might like
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
激活 ActiveX 控件
2006/10/09 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python简单贪吃蛇开发
2019/01/28 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python同时迭代多个序列的方法
2020/07/28 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
中海讯通笔试题
2015/09/15 面试题
高中军训感言400字
2014/02/24 职场文书
大学活动总结模板
2014/07/10 职场文书
教师节标语大全
2014/10/07 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python