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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
javascript中this关键字详解
Dec 12 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery操作cookie
2016/08/08 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python中执行shell的两种方法总结
2017/01/10 Python
python中logging包的使用总结
2018/02/28 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python处理document文档保留原样式
2019/09/23 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
专业销售业务员求职信
2013/11/18 职场文书
学生实习介绍信
2014/01/15 职场文书
营销与策划实训报告
2014/11/05 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android