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 相关文章推荐
使用jquery制作弹出框效果
Apr 03 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
详解jQuery-each()方法
Mar 13 jQuery
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
自定义百度分享的分享按钮
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 设计模式之 工厂模式
2008/12/19 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
用js重建星际争霸
2006/12/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python初学者常见错误详解
2019/07/02 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
教师个人鉴定材料
2014/02/08 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
服务员岗位职责范本
2015/04/09 职场文书
英语演讲开场白
2015/05/29 职场文书
《颐和园》教学反思
2016/02/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python